1.实现原理
- 通过css属性offset-path可以指定元素不规则的动画路径
- 动画元素需
绝对定位 position: absolute;·(一定要设置定位)
2.设置不规则路线
设置不规则路径，绘制好路径Ctrl+U，复制出来源码，把path标签的d属性复制到offset-path属性
自定义设置svg路线
Ctrl+U复制路线代码
3.效果展示
沿着指定路线运动
4.完整代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.love_move {
position: absolute;
font-size: 20px;
offset-path: path(
"m73.5,142.10938c45,-21 29,25 28.5,24.89063c0.5,0.10938 74.5,11.10938 74,11c0.5,0.10938 -47.5,31.10938 -48,31c0.5,0.10938 191.5,45.10938 192.5,45.10938c1,0 121,-154 120.5,-154.10938c0.5,0.10938 37.5,156.10938 37,156c0.5,0.10938 -34.5,45.10938 -34.5,46.10938c0,1 121,70 120.5,69.89063c0.5,0.10938 -225.5,-11.89063 -226,-12"
);
animation: move 6s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<!-- 路径设计网址 -->
<!-- http://svg.wxeditor.com/ -->
<!-- 按Ctrl+U可以看到路径的代码，将path标签的d属性的值复制到offset-path属性的path中即可！ -->
<div class="love_move">1111</div>
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>Layer 1</title>
<path
id="svg_1"
d="m73.5,142.10938c45,-21 29,25 28.5,24.89063c0.5,0.10938 74.5,11.10938 74,11c0.5,0.10938 -47.5,31.10938 -48,31c0.5,0.10938 191.5,45.10938 192.5,45.10938c1,0 121,-154 120.5,-154.10938c0.5,0.10938 37.5,156.10938 37,156c0.5,0.10938 -34.5,45.10938 -34.5,46.10938c0,1 121,70 120.5,69.89063c0.5,0.10938 -225.5,-11.89063 -226,-12"
stroke-width="1.5"
stroke="#000"
fill="#fff"
/>
</g>
</svg>
</body>
</html>
