css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

這篇文章主要介紹css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了北屯免費(fèi)建站歡迎大家使用！

一、最終效果

需求：gift圖片的小動畫每隔2s執(zhí)行一次。

需求就一句話，我們看一下實(shí)現(xiàn)過程。

二、實(shí)現(xiàn)過程

1、網(wǎng)頁結(jié)構(gòu)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        display: inline-block;
        background-color: #cc2222;
        text-decoration: none;
        color: #fff;
        font-size: 14px;
        padding: 10px 12px;
        width: 100px;
        position: relative;
    }
    
    .ico {
        position: absolute;
        width: 14px;
        height: 16px;
        background: url(images/ico.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 4px;
        right: 27px;
    }
    </style>
</head>

<body>
    <nav>
        <a href="javascript:;">
              一元奪寶 
              <div></div>
         </a>
    </nav>
</body>

</html>

效果圖：

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

2、原始動畫

原始動畫效果為：鼠標(biāo)hover上去出現(xiàn)動畫。

動畫樣式如下：

/*動畫*/
    .ico:hover{
    -webkit-animation: Tada 1s both;
    -moz-animation: Tada 1s both;
    -ms-animation: Tada 1s both;
    animation: Tada 1s both
}
/*瀏覽器兼容性部分略過*/
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果：鼠標(biāo)hover上去gift圖片會動一動。

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

3、實(shí)現(xiàn)變化后的需求

需求變動，要求不再是hover上去展示動畫，而是每隔2s展示一次動畫。

思路：不需要hover上去出現(xiàn)動畫，就把hover去掉，每隔2s顯示一次動畫，很容易想到延遲2s,然后動畫一直執(zhí)行。

此時相關(guān)樣式變成：

.ico {
	-webkit-animation: Tada 1s 2s both infinite;
	-moz-animation: Tada 1s 2s both infinite;
	-ms-animation: Tada 1s 2s both infinite;
	animation: Tada 1s 2s both infinite;
}

但是顯示的效果是：頁面加載第一次出現(xiàn)動畫會延遲2s，后面的動畫將不再有延遲。如下，這是不符合需求的。

為了看出效果，下圖為延遲6s的效果。

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

此時換種思路，不要延遲執(zhí)行動畫，而是動畫的效果本身就是前2s元素不動，后1s是元素動，然后一直循環(huán)執(zhí)行。這樣在視覺上就會看起來是延遲2s執(zhí)行1s動畫。

計(jì)算一下，原來的百分比節(jié)點(diǎn)變成了多少。

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

將動畫總時長變成3s，用計(jì)算出的百分比替換原來的百分比，代碼如下：

.ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果就是我們期望的了：

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法

以上是css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法
鏈接URL：http://www.rwnh.cn/article36/ihjgsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、定制開發(fā)、網(wǎng)站建設(shè)、建站公司、品牌網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

css3實(shí)現(xiàn)循環(huán)執(zhí)行動畫的方法