實(shí)現(xiàn)一個(gè)奔跑效果伟桅，你需要以下幾個(gè)資源
- 一個(gè)雪碧圖敞掘，包含了奔跑動(dòng)作的關(guān)鍵幀，一般12個(gè)左右
- 一段除CSS 代碼把上邊的雪碧圖通過動(dòng)畫依次展示出來
最終效果：
http://codepen.io/idiotWu/pen/IDqlw
需要在動(dòng)畫中添加操作的楣铁，就需要使用 CSS 實(shí)現(xiàn)玖雁，否則可以直接用 Gif
實(shí)現(xiàn)原理：
一、拿到雪碧圖民褂，一定要告訴設(shè)計(jì)小伙伴茄菊，這個(gè)雪碧圖是自循環(huán)的疯潭。
奔跑的雪碧圖
二、用 keyframes 定義動(dòng)畫的規(guī)則
$spriteWidth: 140px;
$spriteHeight:140px;
$steps: 12;
@keyframs run{
0% { background-position: 0 0;}
100% {background-position: -($spriteWidth * 12) 0;}
}
#target {
width: $spriteWidth;
height: $spriteHeight;
background: url("../images/sprite.png") 0 0 no-repeat;
animation: run 0.6s step($steps) infinite;
}
三面殖、里面有個(gè)新東西需要解釋 step()
首先參考 CSS3 timing-function: steps() 詳解
steps([, [ start | end ] ]?)：第一個(gè)參數(shù)number為指定的間隔數(shù)竖哩，即把動(dòng)畫分為n步階段性展示，第二個(gè)參數(shù)默認(rèn)為end脊僚，設(shè)置最后一步的狀態(tài)相叁，start為結(jié)束時(shí)的狀態(tài)，end為開始時(shí)的狀態(tài)辽幌，若設(shè)置與animation-fill-mode的效果沖突增淹，而以animation-fill-mode的設(shè)置為動(dòng)畫結(jié)束的狀態(tài)。
