[分享]css元素按着曲线跑

CSS可以很方便地实现元素按照曲线运动的效果，只需要几行代码即可完成。下面我们来看一下具体的实现方法。

.curve {
  position: relative;
  animation: move 5s infinite;
}

@keyframes move {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 500px;
    top: 200px;
  }
} 

上述代码定义了一个名为.curve的类，将要进行曲线运动的元素应用此类即可。然后在这个类里面定义了一个名为move的动画，它在5秒内无限循环，实现元素的持续运动。

在这个动画中，使用了关键帧 @keyframes，它定义了元素从开始到结束的运动过程。在第一个关键帧 0% 中，元素的位置为左上角，即 left: 0; top: 0;。在最后一个关键帧 100% 中，元素的位置为右下角，即 left: 500px; top: 200px;。

这样，通过对元素的位置进行动画处理，就可以实现元素按照一条曲线运动的效果。