最近看到掘金chokcocolv的一篇文章,讲了css运动路径,可以将元素沿着预设的path曲线进行规律的移动。由于Motion Path属性是浏览器新增的,所以兼容性不太好,大致用法如下:
我的天啊!CSS也支持曲线运动了!CSS运动路径属性(Motion Path)实现元素沿路径运动。-Qui-Note

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>
 

效果如下:

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

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

兼容性
motion path是CSS4、5提出的草案,虽然部分浏览器支持了:谷歌,火狐等浏览器已经具备,唯独Safari还没有跟上,真实项目的话,要注意莫要跑太快!
我的天啊!CSS也支持曲线运动了!CSS运动路径属性(Motion Path)实现元素沿路径运动。-Qui-Note