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

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

1. 開場白

入門了動畫以后，就來看看應(yīng)該如何在網(wǎng)頁中寫出一個動畫吧！

萬丈高樓平地起，學(xué)會了基礎(chǔ)語法就可以充分發(fā)揮自己的想象力，做出各種千奇百怪的動畫效果啦！

2. 動畫的定義

如果學(xué)過一些編程語言的同學(xué)會知道，有一個詞叫做變量，這個變量通常是需要事先定義好才能夠去使用。CSS 動畫也是同理，需要先定義，才能夠去使用。接下來我們就來看看該如何定義一個 CSS 動畫：

 @keyframes 動畫名 {

 ?動畫內(nèi)容

 }

@keyframes 是一個固定的寫法，表示要定義一個動畫，后面要空一格再寫你的動畫名，然后大括號里面再寫上對應(yīng)的動畫內(nèi)容。

學(xué)過 JavaScript 的同學(xué)（沒學(xué)過的話也沒關(guān)系，可以繼續(xù)往下看）可以把 @keyframes 理解為 JS 中的 var，就相當(dāng)于定義了一個變量。

大括號里面寫的可以是百分比，百分比后面的大括號里面就是你自己想要的 CSS 樣式啦！假如我們定義一個名為 change-color 的動畫：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>@keyframes</title>
  <style>
    /* 先定義一個名為change-color的動畫 */
    @keyframes change-color {
      0% { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍(lán) */
      100% { color: purple } /* 紫 */
    }
  </style>
</head>
<body>
  
</body>
</html>

TIPS：0% 可以寫成 from，100% 可以寫成 to，效果完全一致，只是一個別名。

我們按照紅橙黃綠青藍(lán)紫的這么一個彩虹顏色順序定義了一個名為 change-color 的動畫，但是此時卻沒有任何的效果，這是因為目前僅僅只是定義了這個動畫，并沒有去指定哪個元素會用到這個動畫，以及該如何使用這個動畫。那么接下來就讓我一起來看看該如何使用這個動畫吧！

3. 小結(jié)

光學(xué)會如何定義動畫還夠，必須要學(xué)會調(diào)用動畫才能夠讓動畫真正的運行起來。

那么趕緊翻到下一頁讓我們一起看看如何調(diào)用動畫吧。