本文通过一个具体的实例演示了如何使用CSS3中的关键帧动画(@keyframes)实现图片的平滑滚动效果，具体包括设置动画的持续时间、播放次数及填充模式等。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #tsj{ position: absolute; width: 48px; height: 48px; left: 50%; top: 50%; /*transform有限制，不能重复用两个，这样子只会有一个生效，这样子的话，就annimation就有作用了*/ /*transform: translate3d(-50%,-50%,0);
整个动作只有一步，在时间为 0 处，position 设置为 start 时动画的第一步已执行完成
相同情况下，position 设置为 end ，当时间为 0 时动画的第一步尚未开始
*/ margin-left: -50px; margin-top: -50px; border-radius:50% ; background: url(img/animation.png); animation: move 1s steps(12,end) infinite; } @keyframes move{ from{background-position: 0 0;} to{background-position: -576px 0;} } </style> </head> <body> <div id="tsj"> </div> </body> </html>
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
