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

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

1. 調(diào)用動畫

定義好了就可以去調(diào)用了，來看一下怎么調(diào)用：

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

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

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

.animate {
  width: 130px;
  height: 130px;
  background: url(../img/rect.png);
  
  /* 動畫: 動畫名(loading) 時長(0.6秒) 運(yùn)行方式(step-end) 動畫次數(shù)(無限) */
  animation: loading .6s step-end infinite;
}

/* 定義動畫：動畫名(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 } /* 最后一幀不顯示，可以隨便寫 */
}

為了能夠讓同學(xué)們在瀏覽器里直接看結(jié)果，我們這里寫了一個可運(yùn)行的案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動畫實(shí)戰(zhàn)</title>
  <style>
	/* 清除瀏覽器默認(rèn)邊距 */
	* { padding: 0; margin: 0; }

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

	  /* 添加背景圖 */
	  background: url(http://img.mukewang.com/wiki/5eda029f08f198f513660768.jpg) center / cover;
	}

	.animate {
	  width: 130px;
	  height: 130px;
	  background: url(http://img.mukewang.com/wiki/5eda0279091a541906500260.jpg);
	  
	  /* 動畫: 動畫名(loading) 時長(0.6秒) 運(yùn)行方式(step-end) 動畫次數(shù)(無限) */
	  animation: loading .6s step-end infinite;
	}
	
	/* 定義動畫：動畫名(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 } /* 最后一幀不顯示，可以隨便寫 */
	}
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

可以看到效果就已經(jīng)很完美的呈現(xiàn)出來了，那么接下來我們再來添加一下條形雪碧圖，看看條形雪碧圖的用法有何不同。

2. 小結(jié)

怎么樣是不是很帥氣呢？這就是雪碧圖幀動畫的優(yōu)勢所在。
如果純用CSS來實(shí)現(xiàn)這段特效那簡直讓人無從下手，但用雪碧圖+幀動畫就可以很輕松的實(shí)現(xiàn)。

下一小節(jié)我們將在此基礎(chǔ)上再添加一個動畫，快來看看多個動畫是如何并存的吧！