实现原理
- 通过css属性offset-path可以指定元素不规则的动画路径
- 动画元素需绝对定位 position: absolute;
不规则的动画路径参数获取方法
通过网站 http://svg.wxeditor.com/ 绘制好想要的不规则的动画路径后，按Ctrl+U可以看到路径的代码，将path标签的d属性的值复制到offset-path属性的path中即可！
完整范例代码
<template> <div> <span class="love_move">love</span> <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect fill="white" id="canvas_background" height="402" width="582" y="-1" x="-1"/> <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/> </g> </g> <g> <title>Layer 1</title> <path id="svg_2" d="m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z" stroke-width="1.5" stroke="red" fill="red"/> </g> </svg> </div> </template> <script> export default {} </script> <style scoped> .love_move { position: absolute; font-size: 20px; offset-path: path("m264.72273,137.28284c52.77378,-129.9431 259.54318,0 0,167.0697c-259.54318,-167.0697 -52.77378,-297.01281 0,-167.0697z"); animation: move 6s linear infinite; } @keyframes move { 100% {offset-distance: 100%;} } </style>
