我的天啊！CSS也支持曲线运动了！CSS运动路径属性(Motion Path)实现元素沿路径运动。

最近看到掘金chokcocolv的一篇文章，讲了css运动路径，可以将元素沿着预设的path曲线进行规律的移动。由于Motion Path属性是浏览器新增的，所以兼容性不太好，大致用法如下：

Motion Path属性 

• offset-path：接收一个 SVG 路径，指定运动的几何路径
• offset-distance：控制当前元素基于 offset-path 运动的距离
• offset-position：指定 offset-path 的初始位置
• offset-anchor：定义沿 offset-path 定位的元素的锚点。
• offset-rotate：移动元素的角度

（转载掘金：《探秘神奇的运动路径动画 Motion Path》——chokcocolv）

案例步骤

1.ps里面钢笔工具随便勾一个复杂的曲线（其实我想画个鱼，算了没有绘画天赋！），然后保存为svg文件，记事本打开svg文件，将svg的path路径复制走。

2.将path路径复制给offset-path；

offset-path：path("****")

3.使用animation通过关键帧将offset-distance参数设置从0到100%。

案例代码:

<style type="text/css">
.demo-box{width: 500px;height: 210px;margin: 300px auto;position: relative;}
.demo{width: 30px;height: 30px;border-radius: 30px;background: #007AFF;position: absolute;z-index: 1;left: 0;top: 0;
            offset-path: path("M66.02 165.48C66.02 165.48 108.2 73.33 190.63 114.35C273.05 155.37 318.36 142.8 351.17 104.2C383.98 65.61 412.89 66.69 433.98 110.84C455.08 154.98 453.91 209.54 405.86 212.7C357.81 215.87 333.59 15.57 273.83 93.67C214.06 171.76 212.5 214.61 151.17 195.92C89.84 177.23 1.56 171.68 82.03 88.59C162.5 5.51 246.48 56.2 246.48 56.2C246.48 56.2 320.7 120.94 286.72 175.23C252.73 229.53 167.97 231.39 114.84 205.68C61.72 179.96 66.02 165.48 66.02 165.48Z");
    offset-rotate: 0deg;
    animation: rotate 20s infinite;
}
@keyframes rotate{
            0% {offset-distance: 0%;  }
100% { offset-distance: 100%; }
 }
</style>
<div class="demo-box">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 281" width="500" height="281">
<path stroke="red" fill="#ffffff" class="shp0" d="M66.02 165.48C66.02 165.48 108.2 73.33 190.63 114.35C273.05 155.37 318.36 142.8 351.17 104.2C383.98 65.61 412.89 66.69 433.98 110.84C455.08 154.98 453.91 209.54 405.86 212.7C357.81 215.87 333.59 15.57 273.83 93.67C214.06 171.76 212.5 214.61 151.17 195.92C89.84 177.23 1.56 171.68 82.03 88.59C162.5 5.51 246.48 56.2 246.48 56.2C246.48 56.2 320.7 120.94 286.72 175.23C252.73 229.53 167.97 231.39 114.84 205.68C61.72 179.96 66.02 165.48 66.02 165.48Z" />
       </svg>
       <div class="demo"></div>
</div>
 

效果如下：

在线体验：https://course.51qux.com/motionpath

兼容性
motion path是CSS4、5提出的草案，虽然部分浏览器支持了：谷歌，火狐等浏览器已经具备，唯独Safari还没有跟上，真实项目的话，要注意莫要跑太快！