溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關基于CSS3的animation動畫屬性如何實現輪播圖效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
animation簡介：
CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現更為復雜的動畫效果。ainimation實現動畫效果主要由兩部分組成：
1）通過類似Flash動畫中的幀來聲明一個動畫；
2）在animation屬性中調用關鍵幀聲明的動畫。
animation屬性值：
animation 屬性是一個簡寫屬性
語法：animation: name duration timing-function delay iteration-count direction;
animation設置的六個動畫屬性：
animation-name：規定需要綁定到選擇器的 keyframe 名稱。取值：
none：（默認）規定無動畫效果（可用于覆蓋來自級聯的動畫）。
keyframename：規定需要綁定到選擇器的 keyframe 的名稱。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。取值：
time：規定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。
animation-timing-function：規定動畫的速度曲線。取值：
ease：默認。動畫以低速開始，然后加快，在結束前變慢。
linear：動畫從頭到尾的速度是相同的。
ease-in：動畫以低速開始。
ease-out：動畫以低速結束。
ease-in-out：動畫以低速開始和結束。
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值。可能的值是從 0 到 1 的數值。
animation-delay：規定在動畫開始之前的延遲。取值：
time：（可選）定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。
animation-iteration-count： 規定動畫應該播放的次數。取值：
n：定義動畫播放次數的數值。
infinite：規定動畫應該無限次播放。
animation-direction：規定是否應該輪流反向播放動畫。取值：
normal：默認值。動畫應該正常播放。
alternate：動畫應該輪流反向播放。
animation動畫實現輪播圖
<!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>圖片標簽要放在同一行，不然圖片之間會有空隙。
關于“基于CSS3的animation動畫屬性如何實現輪播圖效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
