[分享]css3实现滑块来回水平运动

CSS3实现滑块来回水平运动的方法可以采用CSS3动画实现，下面是具体的代码实现：

.slider {
   width: 100px;
   height: 40px;
   background-color: #ccc;
   position: relative;
   overflow: hidden;
}
.slider-control {
   width: 40px;
   height: 40px;
   background-color: #f00;
   position: absolute;
   top: 0;
   left: 0;
   animation: slideControl 2s infinite;
}
@keyframes slideControl {
   0% {
      left: 0;
   }
   50% {
      left: 60px;
   }
   100% {
      left: 0;
   }
} 

首先定义一个包含滑块和控制器的容器，设置容器宽度为100px、高度为40px，背景颜色为#ccc，设定相对定位和overflow为hidden。接下来定义控制器，宽度为40px、高度为40px，背景颜色为#f00，设定绝对定位、top和left属性为0。接着使用CSS3动画属性animation实现滑块的水平运动，动画名称为slideControl，动画时长为2秒，动画无限循环。

在CSS3滑块动画中使用了关键帧@keyframes，来设置滑块控制器的左边距属性left随时间的变化。在关键帧设置中，0%表示动画开始时滑块控制器的位置，50%表示动画中把滑块控制器滑到右侧，100%表示动画结束时将滑块控制器恢复到原来的位置。通过在CSS3动画中使用关键帧，可以更加灵活地控制动画效果，实现滑块来回水平运动。