CSS按钮无限循环描边动画无法渲染问题求助

问题根源 #

你的代码里有两个关键问题导致动画没效果：

• HTML结构错误：.pathway-box容器放在了<body>标签外面，不符合HTML规范，会导致样式与元素的关联异常。
• 缺少动画载体元素：你参考的示例中，按钮描边动画依赖<a>内部的4个<span>实现，但你的<a>标签里只有文字，没有这些span元素，动画没有可渲染的载体。

修正后的代码 #

HTML部分 #

<!DOCTYPE HTML>
<html>
<head>
      <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="pathway-box">
    <h2>Which Person Are You Looking For?</h2>
    <form>
      <a href="/home/chimera/Documents/k13c/fail/jr/index.html" class="Jr">
        Jr
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </a>
      <a href="#" class="Sr">
        Sr
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </a>
    </form>
  </div>
</body>
</html>

修正点说明 #

1. 将.pathway-box容器移至<body>标签内部，修复HTML结构错误。
2. 给每个按钮<a>添加4个空<span>元素，作为CSS动画控制的描边载体，对应你编写的span:nth-child(1)到span:nth-child(4)动画规则。

CSS部分无需修改 #

你编写的动画逻辑是正确的，只要HTML结构和元素补全，动画即可正常循环播放。

内容的提问来源于stack exchange，提问作者Chimera