motionPath
七娃博客
264人阅读
<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>