要使箭头沿着整个路径来回移动，可以使用 SVG 和 CSS 动画。这种方法可以更精确地控制路径和动画。以下是一个完整的示例：
html"><!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>css">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"使动画无限循环。
这个方法使得箭头能够沿着指定的路径平滑地移动，并且可以适应任意复杂的路径形状。
