<template><div class="title">路径动画</div><div class="icon-box2"><div>CSS 路径动画</div><!-- 这个线是用来显示路径的，并没按照这个线进行运动 --><svg width="200" height="200"><path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /></svg><div class="icon2"></div></div><div class="icon-box2"><div>SVG 路径动画</div><svg width="200" height="200"><path id="p1-line1" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /><image x="-10px" y="-10px" xlink:href="@/assets/start.png" style="width: 20px; height:20px"><!-- 设置动画持续时间为2.2，rotate自动调节旋转角度，循环次数为indefinite --><animateMotion dur="2.2s" rotate="auto" repeatCount="indefinite"><!-- 引用外部的path路径作为图片的运动路径 --><mpath xlink:href="#p1-line1"></mpath></animateMotion></image></svg></div><div style="clear: both;"></div><br><br><div class="title">闪光线沿着曲线运动</div><div class="icon-box2"><div>CSS 路径动画</div><!-- 这个线是用来显示路径的，并没按照这个线进行运动 --><svg width="200" height="200"><path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /></svg><div class="icon3"></div><div class="icon3" style="animation-delay: 10ms;"></div><div class="icon3" style="animation-delay: 40ms; opacity: 0.9; transform: scale(0.9)"></div><div class="icon3" style="animation-delay: 60ms; opacity: 0.8; transform: scale(0.8)"></div><div class="icon3" style="animation-delay: 80ms; opacity: 0.7; transform: scale(0.7)"></div><div class="icon3" style="animation-delay: 100ms; opacity: 0.6; transform: scale(0.6)"></div><div class="icon3" style="animation-delay: 120ms; opacity: 0.5; transform: scale(0.5)"></div><div class="icon3" style="animation-delay: 140ms; opacity: 0.4; transform: scale(0.4)"></div><div class="icon3" style="animation-delay: 160ms; opacity: 0.3; transform: scale(0.3)"></div></div></template><script setup></script><style lang="less" scoped>.title {padding: 5px 10px;margin-bottom: 10px;font-size: 16px;border-bottom: 1px solid #999;}svg {path {stroke: orange;fill: none;stroke-width: 2;}}.icon-box2 {position: relative;float: left;div {position: absolute;}.icon2 {width: 20px;height: 20px;border-radius: 50%;background-color: red;/* 开启定位，配合偏移路径 */position: absolute;top: 0;left: 0;/* 元素运动路径 */offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");/* 初始偏移位置百分比 */offset-distance: 10%;animation: identifier2 2s linear infinite;}.icon3 {width: 10px;height: 10px;border-radius: 50%;background-color: red;box-shadow: 0 0 10px red;/* 开启定位，配合偏移路径 */position: absolute;top: 0;left: 0;/* 元素运动路径 */offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");/* 初始偏移位置百分比 */offset-distance: -10%;animation: identifier2 1s linear infinite;};}@keyframes identifier2 {0% {offset-distance: 0%;}100% {offset-distance: 100%;}}</style>
