[分享]css3图片重复运动

CSS3可以实现很多炫酷的效果，其中包括图片重复运动。这种效果可以让一个图片在不断的重复中运动，给人眼前一亮的视觉效果。/ CSS代码 / .image{ backgroundimage: url(&...

CSS3可以实现很多炫酷的效果，其中包括图片重复运动。这种效果可以让一个图片在不断的重复中运动，给人眼前一亮的视觉效果。

/* CSS代码 */
.image{
  background-image: url("yourimage.jpg"); /* 设置背景图片 */
  background-repeat: repeat-x; /* 水平方向重复 */
  animation: move 5s linear infinite; /* 运动动画 */
}

/* 运动动画 */
@keyframes move {
  from {
    background-position: 0 0; /* 初始位置 */
  }
  to {
    background-position: 100% 0; /* 结束位置 */
  }
} 

上面的代码中，我们创建了一个类名为“image”的元素，并设置其背景图片为“yourimage.jpg”（在引号内替换成你想要的图片名字）。接着，我们将图片在水平方向重复，使得其能够不断重复运动。

接下来的关键是通过animation属性，为该元素设置一个称为“move”的动画，它将在5秒内完成，运动的方式是线性的，并且进行无限次。我们可以通过修改这些属性的值，来达到不同的效果。

最后，我们通过@keyframes关键字创建一个名为“move”的动画，并使用from和to规定动画的起始和结束状态。在上面的代码中，我们让图片从初始位置（左上角）开始，移动到结束位置（右上角）。如果你想要在垂直方向上移动图片，只需要将background-position属性的两个值分别改为“0% 0”和“0% 100%”即可。

通过这样的操作，我们便可以轻松实现图片的重复运动效果了。