欧美激情国产精品日韩,无限资源日本好片,九九九久久久久久久

導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因為文本中包含了所謂“超級鏈接”點。

本章給大家介紹css3如何實現(xiàn)循環(huán)執(zhí)行動畫（每次都有延遲），通過實例讓大家了解實現(xiàn)效果的過程。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、最終效果

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

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

二、實現(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>

效果圖：

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圖片會動一動。

3、實現(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的效果。

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

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

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

.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如何實現(xiàn)循環(huán)執(zhí)行動畫（每次都有延遲）？的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁設(shè)計教程 > 詳細頁面

css3如何完成循環(huán)執(zhí)行動畫（每次都有延遲）？

本類教程下載

系統(tǒng)下載排行