首頁  >  文章  >  web前端  >  利用CSS3 animation動畫屬性實現輪播圖效果的方法詳解

利用CSS3 animation動畫屬性實現輪播圖效果的方法詳解

巴扎黑
巴扎黑原創
2018-05-18 10:57:484332瀏覽

CSS3的animation屬性可以像Flash製作動畫一樣,透過控制關鍵影格來控制動畫的每一步,實現更複雜的動畫效果。以下透過本文來跟大家分享基於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">
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_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>
    <p class="p_first">
        <p class="p_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="">
        </p>
    </p>
</body>
</html>

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

以上是利用CSS3 animation動畫屬性實現輪播圖效果的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn