要使箭头沿着整个路径来回移动，可以使用 SVG 和 CSS 动画。这种方法可以更精确地控制路径和动画。以下是一个完整的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.path {
width: 300px;
height: 300px;
}
.arrow {
fill: red;
animation: moveAlongPath 4s linear infinite alternate;
}
@keyframes moveAlongPath {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<svg class="path" viewBox="0 0 300 300">
<path id="linePath" d="M10 10 L290 10 L290 290 L10 290 Z" stroke="black" stroke-width="2" fill="none"/>
<circle r="5" class="arrow">
<animateMotion repeatCount="indefinite" dur="4s" keyPoints="0;1" keyTimes="0;1">
<mpath href="#linePath" />
</animateMotion>
</circle>
</svg>
</body>
</html>
- 使用了一个 SVG 元素来定义路径。
<path>元素定义了一个矩形路径。 - 在
<circle>元素中使用<animateMotion>来沿着路径动画移动。 dur="4s"指定动画持续时间，repeatCount="indefinite"使动画无限循环。
这个方法使得箭头能够沿着指定的路径平滑地移动，并且可以适应任意复杂的路径形状。
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
