[分享]css3把运行轨迹

CSS3是最新的CSS版本，它为我们带来了许多令人兴奋的功能，其中之一就是运行轨迹。运行轨迹是一个可以让HTML元素沿着一个预定义的路径运动的CSS特性，它可以创建令人惊叹的动画效果。使用CSS3运行...

CSS3是最新的CSS版本，它为我们带来了许多令人兴奋的功能，其中之一就是运行轨迹。运行轨迹是一个可以让HTML元素沿着一个预定义的路径运动的CSS特性，它可以创建令人惊叹的动画效果。

使用CSS3运行轨迹是非常简单的，你只需要定义一个路径，然后将它应用到需要运动的元素上即可。以下是一个示例，展示了如何创建一个环形运行轨迹：

Path {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Element {
   width: 50px;
   height: 50px;
   background-color: green;
   position: absolute;
   animation: run 5s linear infinite;
}

@keyframes run {
   from {
      transform: translate(-50%, -50%) rotate(0deg) translateX(75px) rotate(0deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(360deg) translateX(75px) rotate(-360deg);
   }
} 

如你所见，首先我们定义了一个环形路径，并将它放置在页面中心位置。然后，我们定义了一个结点（元素），并将它的位置设为路径的开始位置。最后，我们使用CSS3动画功能将结点运动起来，并让它在路径上绕着圆心运动。

值得一提的是，CSS3运行轨迹还支持其他的路径类型，比如线性路径（线段）和贝塞尔曲线路径等等。你可以使用这些路径创建出各种各样的动画效果，让你的网站更加生动有趣。