亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

1. 定義動畫

想要運行一個動畫，就要先去定義一個動畫 —— 魯迅。

圖片描述

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

/* 清除瀏覽器默認邊距 */
* { 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 } /* 第一個數字代表x軸坐標，第二個數字代表y軸坐標 */
  10% { background-position: -130px 0 } /* x坐標：-130 y坐標：0 */
  20% { background-position: -260px 0 }	/* x坐標：-260 y坐標：0 */
  30% { background-position: -390px 0 }	/* x坐標：-390 y坐標：0 */
  40% { background-position: -520px 0 }	/* x坐標：-520 y坐標：0 */
  50% { background-position: 0 -130px }	/* x坐標：0 y坐標：-130 */
  60% { background-position: -130px -130px } /* x坐標：-130 y坐標：-130 */
  70% { background-position: -260px -130px } /* x坐標：-260 y坐標：-130 */
  80% { background-position: -390px -130px } /* x坐標：-390 y坐標：-130 */
  90% { background-position: -520px -130px } /* x坐標：-520 y坐標：-130 */
  to { background-position: 0 } /* 最后一幀不顯示，可以隨便寫 */
}

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

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

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

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

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

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

有的同學可能會有一個疑問：為什么這些坐標都是負值呢？

我們還是用圖片去理解：

圖片描述

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

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

圖片描述

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

2. 小結

定義完動畫的下一步就是調用動畫了。

下一小節我們調用這個動畫后將會出現一個帥氣的加載動效，快來學習吧！