多個圖片滾動的效果怎么做啊？

多張圖片連續切換就"動"起來了, 很多動效都是這么做的, 例如一些點贊的小動效:

由多"幀"的圖片的在一起快速切換來實現, 這里面其實js不用做太多的工作, 只負責觸發動畫的動作就行, 主要是 css animation 在處理圖片的移動. 而所有的圖片在一起就比如下面這樣:

具體實現其實就是把這個長條圖片從左向右快速滾動, 視覺上就是一個連貫的動效了.

另外要注意 animation steps 能跟幀數匹配, 保持每一幀的圖片都在同一個畫面里上就可以了, 不然會出現鬼畜的感覺.

比起用gif圖片帶來的體積過大和gif播放的問題. 這么做的好處是實現簡單體積小, 動畫還可控, 只需要一些圖片就可以實現效果很棒的小動效.