多个图片滚动的效果怎么做啊_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:52:24 共计：3567 浏览

多个图片滚动的效果怎么做啊？

多张图片连续切换就"动"起来了, 很多动效都是这么做的, 例如一些点赞的小动效:

由多"帧"的图片的在一起快速切换来实现, 这里面其实js不用做太多的工作, 只负责触发动画的动作就行, 主要是 css animation 在处理图片的移动. 而所有的图片在一起就比如下面这样:

具体实现其实就是把这个长条图片从左向右快速滚动, 视觉上就是一个连贯的动效了.

另外要注意 animation steps 能跟帧数匹配, 保持每一帧的图片都在同一个画面里上就可以了, 不然会出现鬼畜的感觉.

比起用gif图片带来的体积过大和gif播放的问题. 这么做的好处是实现简单体积小, 动画还可控, 只需要一些图片就可以实现效果很棒的小动效.

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。