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

手撕紅黑樹(shù) · 更新于 2020-11-11

1. 定義動(dòng)畫(huà)

想要運(yùn)行一個(gè)動(dòng)畫(huà)，就要先去定義一個(gè)動(dòng)畫(huà) —— 魯迅。

圖片描述

那么我們就先來(lái)看看矩形圖要怎么定義動(dòng)畫(huà)：

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

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

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

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

/* 定義動(dòng)畫(huà)：動(dòng)畫(huà)名(loading) */
@keyframes loading {
  from { background-position: 0 0 } /* 第一個(gè)數(shù)字代表x軸坐標(biāo)，第二個(gè)數(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 } /* 最后一幀不顯示，可以隨便寫(xiě) */
}

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

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

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

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

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

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

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

我們還是用圖片去理解：

圖片描述

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

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

圖片描述

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

2. 小結(jié)

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

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