[分享]css3实现div左右移动

CSS3可以实现各种酷炫的效果，比如让一个div元素左右移动就很简单。

<div class="box">这是一个div元素</div>
 
<style>
.box {
  position: relative;
  animation: move 4s infinite;
}
 
@keyframes move {
  0% {left: 0px;}
  50% {left: 500px;}
  100% {left: 0px;}
}
</style> 

在上面的代码中，我们给div元素添加了一个class为“box”，然后在CSS样式表中设置了这个class的样式。我们使用了CSS3的“animation”属性来实现“move”动画，这个动画会在4秒内无限循环。

关键帧（Keyframes）是动画效果中的重要元素，它描述了动画的过渡过程。在这个示例中，我们使用了三个关键帧。在0%的时候，我们将div元素的位置设置为0像素，这是其初始位置。在50%的时候，我们将div元素的位置设置为500像素，这是其移动到最右侧的位置。在100%的时候，我们将div元素的位置重新设置为0像素，这样就形成了从左到右再到左的循环移动效果。

总体来说，CSS3的动画效果非常强大而且容易使用，可以为网页添加更多的交互性和吸引力。