基于CSS3 animation動畫屬性實現(xiàn)輪播圖效果

發(fā)布時間：2017-09-12 11:13:48 作者：佚名

CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現(xiàn)更為復雜的動畫效果。下面通過本文給大家分享基于CSS3 animation動畫屬性實現(xiàn)輪播圖效果，需要的朋友參考下吧

animation簡介：

CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現(xiàn)更為復雜的動畫效果。ainimation實現(xiàn)動畫效果主要由兩部分組成：

1）通過類似Flash動畫中的幀來聲明一個動畫；

2）在animation屬性中調(diào)用關鍵幀聲明的動畫。

animation屬性值：

animation 屬性是一個簡寫屬性

語法：animation: name duration timing-function delay iteration-count direction;

animation設置的六個動畫屬性：

animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。取值：

none：（默認）規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。

keyframename：規(guī)定需要綁定到選擇器的 keyframe 的名稱。

animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計。取值：

time：規(guī)定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果。

animation-timing-function：規(guī)定動畫的速度曲線。取值：

ease：默認。動畫以低速開始，然后加快，在結束前變慢。

linear：動畫從頭到尾的速度是相同的。

ease-in：動畫以低速開始。

ease-out：動畫以低速結束。

ease-in-out：動畫以低速開始和結束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值。

animation-delay：規(guī)定在動畫開始之前的延遲。取值：

time：（可選）定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。

animation-iteration-count：規(guī)定動畫應該播放的次數(shù)。取值：

n：定義動畫播放次數(shù)的數(shù)值。

infinite：規(guī)定動畫應該無限次播放。

animation-direction：規(guī)定是否應該輪流反向播放動畫。取值：

normal：默認值。動畫應該正常播放。

alternate：動畫應該輪流反向播放。

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>

圖片標簽要放在同一行，不然圖片之間會有空隙。

總結

以上所述是小編給大家介紹的基于CSS3 animation動畫屬性實現(xiàn)輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！