css3走动【代码示例】

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

CSS3走动是一种利用CSS3动画属性来实现元素移动的效果。通过使用CSS3的关键帧动画，我们可以轻松地创建各种各样的移动效果，使网页更加生动有趣。

我们需要定义一个元素，给它一个唯一的类名，以便在CSS样式表中进行引用。比如，我们可以创建一个div元素，并给它一个类名为"move"：


<div class="7368-cd52-9420-acc3 move"></div>

接下来，我们需要在CSS样式表中定义这个类名的样式，并使用关键帧动画来实现元素的移动效果。我们可以使用@keyframes规则来定义关键帧动画，然后使用animation属性将动画应用到元素上。比如，我们可以创建一个从左到右移动的动画效果：


.move {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: moveRight 2s infinite;
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

在上面的代码中，我们定义了一个名为"moveRight"的关键帧动画，它从0%到100%的时间段内，元素通过transform属性的translateX函数从0移动到200像素。然后，我们将这个动画应用到具有"move"类名的元素上，并设置动画的持续时间为2秒，并且无限循环播放。

通过这样的设置，我们就可以看到这个元素在网页上从左到右不断地移动。

除了左右移动，我们还可以通过改变其他属性来实现不同的移动效果。比如，我们可以使用关键帧动画来实现元素的旋转效果：


.move {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotate 2s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}