基于CSS3 animation動畫屬性實現(xiàn)輪播圖效果
我要評論animation簡介：
CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關(guān)鍵幀來控制動畫的每一步，實現(xiàn)更為復(fù)雜的動畫效果。ainimation實現(xiàn)動畫效果主要由兩部分組成：
1）通過類似Flash動畫中的幀來聲明一個動畫；
2）在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫。
animation屬性值：
animation 屬性是一個簡寫屬性
語法：animation: name duration timing-function delay iteration-count direction;
animation設(shè)置的六個動畫屬性：
animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。取值：
none：（默認(rèn)）規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。
keyframename：規(guī)定需要綁定到選擇器的 keyframe 的名稱。
animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計。取值：
time：規(guī)定完成動畫所花費的時間。默認(rèn)值是 0，意味著沒有動畫效果。
animation-timing-function：規(guī)定動畫的速度曲線。取值：
ease：默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。
linear：動畫從頭到尾的速度是相同的。
ease-in：動畫以低速開始。
ease-out：動畫以低速結(jié)束。
ease-in-out：動畫以低速開始和結(jié)束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。
animation-delay：規(guī)定在動畫開始之前的延遲。取值：
time：（可選）定義動畫開始前等待的時間，以秒或毫秒計。默認(rèn)值是 0。
animation-iteration-count： 規(guī)定動畫應(yīng)該播放的次數(shù)。取值：
n：定義動畫播放次數(shù)的數(shù)值。
infinite：規(guī)定動畫應(yīng)該無限次播放。
animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫。取值：
normal：默認(rèn)值。動畫應(yīng)該正常播放。
alternate：動畫應(yīng)該輪流反向播放。
animation動畫實現(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" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
</div>
</div>
</body>
</html>
圖片標(biāo)簽要放在同一行，不然圖片之間會有空隙。
總結(jié)
以上所述是小編給大家介紹的基于CSS3 animation動畫屬性實現(xiàn)輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
css3+animation屬性制作拆分loading文字加載動畫特效
css3 animation屬性制作loading文字拆分上下滾動加載動畫特效。非常不錯，感興趣的朋友前來下載使用2019-07-03
這篇文章主要介紹了css中用animation的steps屬性制作幀動畫，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-25CSS3與動畫有關(guān)的屬性transition、animation、transform對比（史上最全
這篇文章主要介紹了CSS3與動畫有關(guān)的屬性transition、animation、transform對比，通過瀏覽器兼容性，用法和對比更深刻的展示了彼此之間的異同，具體操作步驟大家可查看下文2017-08-18
css3基于animation屬性實現(xiàn)的人物動畫特效源碼
這是一款css3基于animation屬性實現(xiàn)的人物動畫特效源碼。主要基于animation的background-position屬性實現(xiàn)的人物動畫效果，沒有引入任何外部js元素2017-05-17CSS3中動畫屬性transform、transition和animation屬性的區(qū)別
最近在項目中用到了CSS3中的動畫屬性。無奈對于css3幾個新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點資料，總結(jié)一下，方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25- 這篇文章主要為大家詳細(xì)介紹了CSS3中Animation動畫屬性用法，教大家如何使用animation動畫，感興趣的小伙伴們可以參考一下2016-07-04
css3使用animation屬性實現(xiàn)炫酷效果(推薦)
這篇文章主要介紹了css3使用animation屬性實現(xiàn)炫酷效果(推薦),非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-04
