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

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

1. 定義動畫

想要運(yùn)行一個動畫，就要先去定義一個動畫 —— 魯迅。

圖片描述

那么我們就先來看看矩形圖要怎么定義動畫：

/* 清除瀏覽器默認(rèn)邊距 */
* { padding: 0; margin: 0; }

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

  /* 添加背景圖 */
  background: url(../img/bg.jpg) center / cover;
}

.animate {
  background: url(../img/rect.png);
}

/* 定義動畫：動畫名(loading) */
@keyframes loading {
  from { background-position: 0 0 } /* 第一個數(shù)字代表x軸坐標(biāo)，第二個數(shù)字代表y軸坐標(biāo) */
  10% { background-position: -130px 0 } /* x坐標(biāo)：-130 y坐標(biāo)：0 */
  20% { background-position: -260px 0 }	/* x坐標(biāo)：-260 y坐標(biāo)：0 */
  30% { background-position: -390px 0 }	/* x坐標(biāo)：-390 y坐標(biāo)：0 */
  40% { background-position: -520px 0 }	/* x坐標(biāo)：-520 y坐標(biāo)：0 */
  50% { background-position: 0 -130px }	/* x坐標(biāo)：0 y坐標(biāo)：-130 */
  60% { background-position: -130px -130px } /* x坐標(biāo)：-130 y坐標(biāo)：-130 */
  70% { background-position: -260px -130px } /* x坐標(biāo)：-260 y坐標(biāo)：-130 */
  80% { background-position: -390px -130px } /* x坐標(biāo)：-390 y坐標(biāo)：-130 */
  90% { background-position: -520px -130px } /* x坐標(biāo)：-520 y坐標(biāo)：-130 */
  to { background-position: 0 } /* 最后一幀不顯示，可以隨便寫 */
}

定義一個名為 loading 的動畫，雪碧圖上一共有 10 個元素，所以在這里我們定義 11 幀(最后一幀看不到)。

每一幀都要對準(zhǔn)位置，整張雪碧圖的尺寸是 680px * 260px，2 行 5 列。

所以高260除以行2等于 130px、

寬 680除以列 5還是等于 130px，所以我們的 div 寬高要設(shè)置成 130 * 130，第一幀到第五幀都是寬(130px)的倍數(shù)，第一幀是0 * 130px，第二幀是1 * 130px，依此類推。

到了第五幀(40%)的時候，整個第一行已經(jīng)都過了一遍，所以第六幀(50%)我們要換到第二行的行首。

于是 y 坐標(biāo)由之前的 0 變成了 -130px，剛好是一行的高度。

有的同學(xué)可能會有一個疑問：為什么這些坐標(biāo)都是負(fù)值呢？

我們還是用圖片去理解：

圖片描述

小一點的方框代表我們的 div，大方塊代表雪碧圖，原點為左上角。

如果是正值的話，就是雪碧圖左上角距離 div 左上角右移。

圖片描述

如果值為負(fù)的話，就是左移。y 軸同理，正值下移，負(fù)值上移。

2. 小結(jié)

定義完動畫的下一步就是調(diào)用動畫了。

下一小節(jié)我們調(diào)用這個動畫后將會出現(xiàn)一個帥氣的加載動效，快來學(xué)習(xí)吧！