嗖一下,答案就来了!

导航:QUI-Notes/motionPath

motionPath

<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>

效果展示: