第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

手撕紅黑樹 · 更新于 2020-11-11

1. 調(diào)用動(dòng)畫

定義好動(dòng)畫之后就需要在想要的位置去調(diào)用啦，先來(lái)學(xué)習(xí)一下動(dòng)畫調(diào)用的語(yǔ)法：

animation: name duration timing-function delay iteration-count direction fill-mode;

當(dāng)然寫的時(shí)候可絕對(duì)不是這么寫的啊，只有冒號(hào)前面的animation這個(gè)單詞不變，剩下單詞全部都要替換，那么要替換成什么呢？

請(qǐng)看中文翻譯版：

animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫運(yùn)行的方式 延遲 動(dòng)畫次數(shù) 動(dòng)畫方向 填充模式;

是不是看到這里直接暈了，甚至有種想關(guān)掉網(wǎng)頁(yè)的沖動(dòng)？不要怕，這些只是看起來(lái)嚇人，其實(shí)都是紙老虎。

而且也不是這些屬性都要用到，哪個(gè)屬性你用不到就可以不寫，通常我們只會(huì)用到幾個(gè)常用的。

2. 極簡(jiǎn)形式

先說(shuō)說(shuō)最最簡(jiǎn)單的一種方式，看了絕對(duì)不懵圈的那種：

animation: name duration;

翻譯如下：

animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng);
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 定義動(dòng)畫：動(dòng)畫名(change-color) */ 
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍(lán) */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 300px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 10s;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) -->
    animation: change-color 10s;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

可以看出整段文字按照咱們定義的 change-color 動(dòng)畫來(lái)運(yùn)行：赤橙黃綠青藍(lán)紫一共十秒，但十秒過(guò)后字變黑了，因?yàn)檫@段字默認(rèn)的顏色本來(lái)就是黑色的。

3. 無(wú)限循環(huán)

如果我們不想讓它結(jié)束，那就十秒過(guò)后再來(lái)十秒，十秒完再十秒，無(wú)限重復(fù)、無(wú)限循環(huán)：

animation: name duration iteration-count;

翻譯過(guò)來(lái)就是：

animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫次數(shù);
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍(lán) */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 10s infinite;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) 動(dòng)畫次數(shù)(無(wú)限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(10秒) 動(dòng)畫次數(shù)(無(wú)限) -->
    animation: change-color 10s infinite;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

  • 運(yùn)行次數(shù)可以寫具體的數(shù)字，動(dòng)畫會(huì)根據(jù)你寫的數(shù)字來(lái)運(yùn)行相應(yīng)的次數(shù)，想要無(wú)限運(yùn)行的話就寫infinite

雖然成功的無(wú)限循環(huán)了，但是目前看來(lái)有個(gè)缺點(diǎn)，那就是最后一幀紫色結(jié)束后突然就變成了第一幀的紅色，沒(méi)有任何的過(guò)渡效果。

有兩個(gè)解決方案：

1. 定義動(dòng)畫的時(shí)候最后一幀再變回紅色：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red }  /* 紅 */
      13% { color: orange } /* 橙 */
      26% { color: yellow } /* 黃 */
      39% { color: green } /* 綠 */
      52% { color: cyan } /* 青 */
      65% { color: blue } /* 藍(lán) */
      78% { color: purple } /* 紫 */
      to /* 100% */ { color: red } /* 最后一幀和第一幀的樣式一致 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 6s infinite;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(6秒) 動(dòng)畫次數(shù)(無(wú)限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(6秒) 動(dòng)畫次數(shù)(無(wú)限) -->
    animation: change-color 6s infinite;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

2. 交替動(dòng)畫

什么是交替動(dòng)畫呢？簡(jiǎn)單來(lái)說(shuō)就是從第一幀紅到最后一幀紫運(yùn)行完了之后，再?gòu)?strong>最后一幀紫到第一幀紅，然后再?gòu)募t到紫、從紫到紅，大紅大紫。

這種動(dòng)畫就不用最后一幀再定義回第一幀的紅色了，直接定義從紅到紫即可。來(lái)看看語(yǔ)法：

animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫次數(shù) 動(dòng)畫方向;
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */ 
      to /* 100% */ { color: purple } /* 為了方便直接從紅到紫 */ 
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 1s infinite alternate;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(1秒) 動(dòng)畫次數(shù)(無(wú)限) 動(dòng)畫方向(交替運(yùn)行) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(1秒) 動(dòng)畫次數(shù)(無(wú)限) 動(dòng)畫方向(交替運(yùn)行) -->
    animation: change-color 1s infinite alternate;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

4. 幀動(dòng)畫

語(yǔ)法：

animation: 定義過(guò)的動(dòng)畫名 動(dòng)畫時(shí)長(zhǎng) 動(dòng)畫運(yùn)行的方式;

動(dòng)畫運(yùn)行的方式要用到steps這個(gè)函數(shù)。

看起來(lái)可能有點(diǎn)暈，但是我們寫成英文看起來(lái)就會(huì)好很多：

animation: change-color 7s steps(10);

這里面唯一一個(gè)新鮮詞就是steps，這個(gè)steps后面要寫上小括號(hào)，括號(hào)里面就是這次動(dòng)畫要按照多少幀來(lái)運(yùn)行，來(lái)看個(gè)具體的案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍(lán) */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 7s steps(1);
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(steps(1)) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(steps(1)) -->
    animation: change-color 7s steps(1);
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

可以看到這就按照我們所設(shè)想的那樣：紅、橙、黃、綠、青、藍(lán)、紫……

咦？紫呢？怎么最后直接跳過(guò)紫色直接就進(jìn)入黑色了呢？

原來(lái)，這里涉及到了一個(gè)幀動(dòng)畫里面一個(gè)難以理解的點(diǎn)，在講這點(diǎn)之前我們先來(lái)看結(jié)論，這樣的話即使沒(méi)弄懂到底是怎么一回事也可以直接記住結(jié)論，讓動(dòng)畫按照我們預(yù)先設(shè)想的那樣去運(yùn)行。

4.1 非循環(huán)式幀動(dòng)畫

語(yǔ)法：

animation: 動(dòng)畫名 時(shí)長(zhǎng) step-end both;

來(lái)看具體案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from { color: red }
      16% { color: orange }
      32% { color: yellow }
      48% { color: green }
      64% { color: cyan }
      80% { color: blue }
      to { color: purple }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 7s step-end both;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 填充模式(雙向) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 填充模式(雙向)-->
    animation: change-color 7s step-end both;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

可以看到成功了，紫色出來(lái)了，而且永遠(yuǎn)都不會(huì)再回到默認(rèn)的黑色了。

這究竟是怎么一回事呢？step-end和both這兩個(gè)單詞到底是什么意思呢？

先不要著急，咱們先把結(jié)論記下來(lái)，原理放到后面講。

4.2 循環(huán)式幀動(dòng)畫

語(yǔ)法：

animation: 動(dòng)畫名 時(shí)長(zhǎng) step-end infinite;

除了在調(diào)用動(dòng)畫的語(yǔ)法上最后一個(gè)單詞不一樣，其實(shí)主要區(qū)別在于定義動(dòng)畫時(shí)，定義動(dòng)畫的時(shí)候可以多加一幀，來(lái)看具體案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認(rèn)邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無(wú)視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動(dòng)畫，動(dòng)畫名叫：change-color */
    @keyframes change-color {
      from { color: red }
      14% { color: orange }
      28% { color: yellow }
      42% { color: green }
      56% { color: cyan }
      70% { color: blue }
      84% { color: purple }
      to { color: aquamarine }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預(yù)先定義好的動(dòng)畫 */
      animation: change-color 7s step-end infinite;
      /* 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 動(dòng)畫次數(shù)(無(wú)限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動(dòng)畫：動(dòng)畫名(change-color) 時(shí)長(zhǎng)(7秒) 動(dòng)畫運(yùn)行的方式(step-end) 動(dòng)畫次數(shù)(無(wú)限)-->
    animation: change-color 7s step-end infinite;
  </div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

圖片描述

反正最后一幀出不來(lái)，那我們直接就在最后多加一幀不就得了，最后一幀寫什么都可以，反正最后一幀就像空氣一樣——你永遠(yuǎn)也看不到。

5. 小結(jié)

學(xué)會(huì)了這一章，你就已經(jīng)可以實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫效果了，但是為什么最后一幀會(huì)消失呢？

這和 steps 函數(shù)的運(yùn)行機(jī)制有關(guān)，其實(shí)它的原理并不復(fù)雜，但就是因?yàn)椴环先祟惖闹庇X(jué)導(dǎo)致許多人無(wú)法理解。

接下來(lái)的章節(jié)我們就來(lái)深入的理解一下這個(gè)神秘的 steps 函數(shù)。