基于CSS3的animation動(dòng)畫(huà)屬性如何實(shí)現(xiàn)輪播圖效果

發(fā)布時(shí)間：2021-06-29 10:58:25 來(lái)源：億速云閱讀：171 作者：小新欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)基于CSS3的animation動(dòng)畫(huà)屬性如何實(shí)現(xiàn)輪播圖效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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ò)類似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 名稱。取值：

none：（默認(rèn)）規(guī)定無(wú)動(dòng)畫(huà)效果（可用于覆蓋來(lái)自級(jí)聯(lián)的動(dòng)畫(huà)）。

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

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" 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)簽要放在同一行，不然圖片之間會(huì)有空隙。

關(guān)于“基于CSS3的animation動(dòng)畫(huà)屬性如何實(shí)現(xiàn)輪播圖效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

基于CSS3的animation動(dòng)畫(huà)屬性如何實(shí)現(xiàn)輪播圖效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽