优化CSS圆角L形路径绘制动画效果

嘿，我完全懂你现在的困扰——想做一个页面打开时先向下延伸、再向右展开的圆角L形绘制动画，结果当前用border实现的方案在圆角处出现了难看的 glitch，对吧？先看看你提到的需求和现有问题，咱们一步步来优化~

你的原始需求与问题 #

我正在尝试做一个圆角线条的流动/绘制动画。我现在的方案能运行，但不是我想要的效果。我的目标是页面打开时，这条线先向下延伸，然后向右延伸。

我已经尽可能还原了这个动画的运行环境，方便大家提出更好的方案。

我现在的方案在圆角处有一个难看的小问题。我也试过用p5.js和SVG动画，但不确定哪种方案最好。我觉得是圆角增加了复杂度，但这个形状是我必须要的，没办法。

现有代码的问题分析 #

你当前用CSS border + 伪元素的方案，核心问题出在圆角处的动画过渡上：
当动画从50%到100%阶段，border-bottom突然从transparent切换为实色，同时width从0拉伸到100%，而border-bottom-left-radius是应用在整个伪元素上的，浏览器在渲染这个过渡时，很难完美衔接竖线和横线的圆角，就会出现你看到的 glitch。

最优解决方案：用SVG实现无Glitch的连续动画 #

SVG天生就是为这种路径动画设计的，它的stroke-dasharray和stroke-dashoffset属性能完美实现连续的线条绘制效果，尤其是带圆角的路径，过渡会非常自然，完全不会有衔接问题。

下面给你一个适配需求的完整优化方案，既满足“先向下再向右”的流动方向，又解决了圆角 glitch 问题：

完整优化代码

CSS 部分

body {
  background-color: black;
  color: white;
  overflow: hidden;
  margin: 0;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
}

.l-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -999;
}

.l-line-svg {
  width: 100%;
  height: 100%;
}

.l-line-path {
  fill: none;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: trace-path 1.2s ease-in-out forwards;
}

@keyframes trace-path {
  to {
    stroke-dashoffset: 0;
  }
}

/* 不同颜色主题的样式 */
.layout[data-active-section="red"] .l-line-path {
  stroke: #D85140;
}
.layout[data-active-section="blue"] .l-line-path {
  stroke: #3555B4;
}
.layout[data-active-section="white"] .l-line-path {
  stroke: #E6E6E6;
}
.layout[data-active-section="yellow"] .l-line-path {
  stroke: #F6B90B;
}

.navbar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  z-index: 1;
}

.navbar button {
  background: none;
  border: 1px solid white;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.navbar button:hover {
  border-color: var(--active-line-color);
  color: var(--active-line-color);
}

HTML 部分

<body>
  <div class="layout" data-active-section="red">
    <div class="l-shape">
      <svg class="l-line-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <!-- 路径定义：从左上角(0,0)向下到左下角(0,100)，再向右到右下角(100,100) -->
        <path class="l-line-path" d="M0,0 V100 H100" />
      </svg>
    </div>

    <nav class="navbar">
      <button onclick="changeSection('red')">red</button>
      <button onclick="changeSection('blue')">blue</button>
      <button onclick="changeSection('white')">white</button>
      <button onclick="changeSection('yellow')">yellow</button>
    </nav>
  </div>

  <script>
    // 初始化：计算路径总长度并设置CSS变量
    const initPathLength = () => {
      const path = document.querySelector('.l-line-path');
      const length = path.getTotalLength();
      document.documentElement.style.setProperty('--path-length', length);
    };
    initPathLength();

    // 切换主题并重置动画
    function changeSection(section) {
      const layout = document.querySelector(".layout");
      layout.setAttribute("data-active-section", section);
      
      // 重置动画：克隆元素并替换，触发动画重新播放
      const oldPath = document.querySelector('.l-line-path');
      const newPath = oldPath.cloneNode(true);
      oldPath.parentNode.replaceChild(newPath, oldPath);
      initPathLength();
    }
  </script>
</body>

方案优势说明 #

1. 完全消除圆角Glitch：SVG的stroke-linejoin: round会自动处理路径拐角的圆角，动画过程中线条是连续绘制的，没有任何衔接断层。
2. 完美匹配需求：路径M0,0 V100 H100实现了“先向下（从顶部到底部）再向右（从左到右）”的流动方向，完全符合你的预期。
3. 灵活易维护：如果需要调整圆角大小、线条粗细或者流动方向，只需要修改SVG的path属性或CSS的stroke-width等参数即可，比border方案更直观。
4. 主题切换兼容：保留了你原来的主题切换逻辑，点击按钮依然能正常切换线条颜色，同时动画可以重新播放。

如果你还是想尝试CSS方案，也可以调整keyframes让border-bottom的颜色和width同步过渡，但这种方式依然可能在不同浏览器出现渲染差异，SVG方案是目前最稳定可靠的选择~

备注：内容来源于stack exchange，提问作者Sophia