如何用動畫效果讓圖片跑起來?

首先需要一張精靈圖, 里面是一組跑動圖片, 每個圖片都是一個單獨人物跑動的效果, 然后新建一個盒子 盒子大小為單個圖片的大小 ,然后把這個圖設為盒子的背景圖

設置完成之后的效果

因為我們設置盒子的寬度為一個人物圖的寬, 所以此時顯示出的也就是第一張人物圖樣子,那么我們怎么讓這個人物跑起來呢?

首先我們會想到使用動畫效果, 讓背景圖一直位移直到移至最后一張圖, 這樣每個人物的動作連接起來,就是一個跑動的效果

?

?

?如上圖代碼, 背景圖確實動了起來,但是僅僅是背景圖在移動, 并沒有達到人物跑動的效果

?這時我們就需要使用逐幀動畫這個屬性值

animation-timing-function(速度曲線):? steps(屬性值為數(shù)字)逐幀動畫

因為我們示范的背景圖里人物有12個, 所以這個steps里應填數(shù)字: 12

?加上逐幀動畫后 動畫會在動畫時長內一幀一幀的顯示, 對應的12個人物圖正好每回都出現(xiàn)在盒子中 , 當動畫連貫起來時就是一個人物跑動的效果.?

然后再給動畫添加一個無限循環(huán)的效果, 人物就能一直跑動了

此時也可以給盒子設置一個動畫,接在之前的動畫后面 讓盒子整體向右去移動

?

?就可以實現(xiàn)一個小人向前跑動的效果, 想讓小人跑動快一些的話可以設置run那個動畫的動畫時長更短

? ? ? ? 以上就是逐幀動畫的小應用

總結

以上是生活随笔為你收集整理的CSS3 逐帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。