animation簡(jiǎn)介：
CSS3的animation屬性可以像Flash制作動(dòng)畫(huà)一樣，通過(guò)控制關(guān)鍵幀來(lái)控制動(dòng)畫(huà)的每一步，實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果。ainimation實(shí)現(xiàn)動(dòng)畫(huà)效果主要由兩部分組成：
1）通過(guò)類(lèi)似Flash動(dòng)畫(huà)中的幀來(lái)聲明一個(gè)動(dòng)畫(huà)；
2）在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)。
animation屬性值：
animation 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性
語(yǔ)法：animation: name duration timing-function delay iteration-count direction;
animation設(shè)置的六個(gè)動(dòng)畫(huà)屬性：
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱(chēng)。取值：
none：（默認(rèn)）規(guī)定無(wú)動(dòng)畫(huà)效果（可用于覆蓋來(lái)自級(jí)聯(lián)的動(dòng)畫(huà)）。
keyframename：規(guī)定需要綁定到選擇器的 keyframe 的名稱(chēng)。
animation-duration：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。取值：
time：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間。默認(rèn)值是 0，意味著沒(méi)有動(dòng)畫(huà)效果。
animation-timing-function：規(guī)定動(dòng)畫(huà)的速度曲線。取值：
ease：默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。
linear：動(dòng)畫(huà)從頭到尾的速度是相同的。
ease-in：動(dòng)畫(huà)以低速開(kāi)始。
ease-out：動(dòng)畫(huà)以低速結(jié)束。
ease-in-out：動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中定義自己的值。可能的值是從 0 到 1 的數(shù)值。
animation-delay：規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。取值：
time：（可選）定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間，以秒或毫秒計(jì)。默認(rèn)值是 0。
animation-iteration-count： 規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。取值：
n：定義動(dòng)畫(huà)播放次數(shù)的數(shù)值。
infinite：規(guī)定動(dòng)畫(huà)應(yīng)該無(wú)限次播放。
animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。取值：
normal：默認(rèn)值。動(dòng)畫(huà)應(yīng)該正常播放。
alternate：動(dòng)畫(huà)應(yīng)該輪流反向播放。
animation動(dòng)畫(huà)實(shí)現(xiàn)輪播圖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片輪換</title> <style type="text/css"> div,img{ margin: 0; padding: 0; } .div_first{ width: 1000px; height: 300px; margin-top: 100px; margin-left: 250px; overflow: hidden; } .div_second{ width: 4000px; position: relative; animation: myimg 12s linear infinite normal; } @keyframes myimg{ 0{ left: 0; } 5%{ left: 0; } 30%{ left: -1000px; } 35%{ left: -1000px; } 60%{ left: -2000px; } 65%{ left: -2000px; } 95%{ left: -3000px; } 100%{ left: -3000px; } } </style></head><body> <div class="div_first"> <div class="div_second"> <img src="images/011-1.jpg" </div> </div></body></html>圖片標(biāo)簽要放在同一行，不然圖片之間會(huì)有空隙。
總結(jié)
以上所述是小編給大家介紹的基于CSS3 animation動(dòng)畫(huà)屬性實(shí)現(xiàn)輪播圖效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
