css 实现在一条线上活动小物体（offset-path）

八卦阵 · 2024-12-11 21:29:12

直接贴代码，留几个参考网址给大家
【SVG】路径＜Path＞标签详解，一次搞懂全部命令参数
探秘神奇的运动路径动画 Motion Path

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mainater {
width: 200px;
height: 200px;
}
.g-svg {
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}
.g-wrap {
position: relative;
width: 200px;
height: 200px;
margin: auto;
}
.ball {
position: aboslute;
width: 6px;
height: 4px;
/* clip-path: polygon(0 0, 100% 50%, 0 100%); */
offset-path: path('M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200');
background: #0AC185FF;
animation: move 3000ms infinite linear;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
<title>Document</title>
</head>
<body>
<div class="mainater">
<div style="scale: 1;">
<svg class="g-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200" stroke="#0AC185FF" fill="none" stroke-width="2"/>
</svg>
<div class="g-wrap">
<div class="ball"></div>
</div>
</div>
</div>
</body>
</html>

复制代码

有需求，欢迎探讨

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

0 个回复