css3 来回走动

CSS3中的一项非常强大的功能是实现动画效果，这些动画是通过CSS3的transition和animation属性来实现的。其中，使用animation属性实现来回走动效果十分方便

.walk {
    animation: walk 1s infinite alternate;
}
@keyframes walk {
from {
     transform: translateX(0);
 }
to {
     transform: translateX(100px);
 }
}
    

上述代码中，我们定义了一个类名walk，通过animation属性来启用动画效果，其中1s表示一次完整动画需要1秒，infinite表示动画将会无限循环播放，alternate则表示每次循环播放的方向会相反。

接下来，我们在keyframes声明块中，通过from和to关键帧定义了动画的起始和结束状态，其中通过transform属性的translateX（X轴平移）来实现元素来回走动的效果。

总之，CSS3的动画效果十分便于实现，而且支持各种变幻无常的场景，有了它，我们可以制作出更加生动有趣的网站页面。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！