[分享]css3动画运动路径

CSS3动画运动路径是一种相对较新的Web设计技术，能够让你通过CSS而不是JavaScript来使html元素沿着自定义的路径运动。/在CSS中定义运动路径/ path{ d: path(指令与值)...

CSS3动画运动路径是一种相对较新的Web设计技术，能够让你通过CSS而不是JavaScript来使html元素沿着自定义的路径运动。

/*在CSS中定义运动路径*/
path{
  d: path(指令与值);
}
/*应用到元素上*/
#box{
  animation: 目标 路径 持续时间 循环次数 速度 函数
} 

在创建动画时，首先需要在CSS中定义相应的运动路径。这可以通过SVG的标签来指定。在CSS中使用“path”属性指定路径并设置路径指令和对应的值。

接下来，需要将定义好的路径应用到要运动的元素上，并定义一些附加属性，如运动目标、动画持续时间、循环次数、速度等。在animation属性中设置路径参数，就可以使元素沿着自定义路径运动了。

/*定义路径*/
path{
  d: path('M 10 80 Q 95 10 180 80');
}
/*应用到元素上*/
#box{
  animation: move 4s infinite ease-in-out;
}
/*定义动画*/
@keyframes move{
  0%{
    transform: translate(0, 0);
  }
  100%{
    transform: translate(500px, 0);
  }
} 

上述代码中，SVG路径定义了一个二次贝塞尔曲线，指定了起点（M 10 80）和控制点（Q 95 10 180 80）。然后，在元素样式中定义了动画运动路径，并在keyframes中指定了动画的起点和终点，其中终点使用了transform中的translate()函数实现了元素在路径上的移动。

通过CSS3动画运动路径，可以创造出各种有趣的动画效果，使你的页面更加生动有趣。