【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画 - ChokCoco
内容提要
本文探讨了如何使用纯 CSS/SVG 实现线条动画效果，重点介绍了 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性。这些属性可以用于创建不规则路径的动画效果，虚线样式和渐变色线条动画。文章提供了多个示例和代码，展示了通过调整参数和使用动画实现不同的视觉效果。
延伸解读
stroke-dasharray 与 CSS dashed 的关键区别
文章指出，CSS 的 dashed 关键字只能生成固定样式的虚线，无法控制每段虚线的长度和间隔。而 SVG 的 stroke-dasharray 属性允许精确指定虚线和间隔的尺寸，例如 stroke-dasharray: 20, 20 表示 20px 虚线加 20px 间隔。这种控制力是实现复杂线条动画的基础，也是纯 CSS 方案难以替代的。
stroke-dashoffset 如何驱动路径动画
stroke-dashoffset 用于改变虚线的起始偏移量。文章通过示例说明，保持 stroke-dasharray 不变，仅调整 stroke-dashoffset 的值，就能让虚线从路径的不同位置开始绘制。结合 CSS 动画，持续改变 stroke-dashoffset，即可产生线条沿路径行进的视觉效果，这是实现不规则路径动画的核心机制。
纯色线条的局限与渐变替代方案
文章提到，基于 stroke-dasharray 的线条只能使用单一颜色，无法直接实现渐变色。为此，作者提供了两种思路：一是用 filter: drop-shadow() 为线条添加阴影增强光效；二是利用角向渐变背景配合旋转和 mask 裁剪，模拟出渐变线条动画。后者通过 @property 自定义属性优化旋转动画，代码更优雅。
Q&A
如何使用 CSS/SVG 实现线条动画效果？
可以通过使用 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性来实现线条动画效果。
什么是 stroke-dasharray 和 stroke-dashoffset？
stroke-dasharray 用于控制虚线的长度和间隔，而 stroke-dashoffset 则用于改变虚线的起点。
如何创建渐变色的线条动画效果？
可以通过旋转渐变背景和使用 mask 技术来实现渐变色的线条动画效果。
使用 filter: drop-shadow() 有什么效果？
使用 filter: drop-shadow() 可以为线条添加阴影效果，增强视觉效果。
如何调整 stroke-dasharray 来实现不同的虚线样式？
通过设置 stroke-dasharray 的值，可以控制虚线的长度和间隔，从而实现不同的虚线样式。
在实现线条动画时有哪些常见问题？
基于 stroke-dasharray 实现的边框线条只能使用一种颜色，无法实现渐变色效果。
