用CSS mask+SVG动画实现不规则线条描边，核心是用预设手绘路径（混用L/Q指令、微坐标抖动）作为mask，配合opacity渐显和luminance灰度映射，达成起笔停顿、边缘晕开等真实手绘效果。
用 CSS mask + SVG 动画实现不规则线条描边
直接用 border 或 outline 做不了“无规则线条”——那本质是路径动画，得靠 SVG 路径配合 CSS mask 或 clip-path。核心思路：把按钮背景盖住，只留一条动态绘制的 SVG 路径作为“可见窗口”，路径不断重绘，就形成线条游走效果。
- 不能用纯 CSS 的
stroke-dasharray+stroke-dashoffset模拟，因为那是规则路径（矩形、圆），没法表达手绘感、折线抖动等无规则特征 - SVG 路径必须用
<path d="...">手写或导出，推荐用 Figma / Illustrator 导出简化后的d字符串，避免过多贝塞尔控制点拖慢动画 - 动画时长建议设在 2–4s，太快看不出线条走向，太慢显得卡顿；用
ease-in-out比线性更自然
怎么让线条看起来像“手绘生成”而不是机械描边？
关键在路径数据和动画节奏。真实手绘有起笔停顿、轻微回锋、线宽变化——这些不能靠 CSS 实现，得在 SVG 路径里预埋特征：
- 路径
d中混用L（直线）和Q（二次贝塞尔），避免全用C（三次贝塞尔），后者太顺滑，不像人手 - 在关键转折点前后加极短的重复坐标，比如
L 100 200 L 100.2 200.1，制造“顿笔”错觉 - 不要用
stroke-width动画模拟粗细变化，浏览器不支持路径局部线宽；改用两个叠加路径：主路径细线 + 预渲染的“墨迹扩散”遮罩层，靠 opacity 动画渐显
为什么用 mask 而不用 clip-path？
clip-path 只能做硬裁切，边缘永远锐利；而 mask 支持 alpha 通道，可以做出线条边缘微微晕开、起始端淡入、末端渐隐的效果，更接近真实手绘感。
- mask 图像必须是内联 SVG，不能外链，否则跨域或加载延迟会导致闪白
- mask 容器需设
mask-type: luminance（默认），确保灰度值映射正确；亮部显示，暗部隐藏 - 动画触发必须作用于 mask 内部的
<path>，不是 mask 容器本身——否则整个按钮会位移，不是线条动 - 注意 Safari 对
mask的transform支持不稳定，优先用stroke-dashoffset驱动路径绘制，再用 mask 显形
常见报错和兼容性陷阱
最常遇到的是 Safari 下 mask 不生效、Chrome 里线条闪烁、按钮点击区域消失——基本都跟这几处有关：
立即学习“前端免费学习笔记（深入）”；
-
mask元素没设width/height，导致 Safari 认为尺寸为 0，整个 mask 失效；必须显式设置，如width: 100%; height: 100% - 路径
d字符串含换行或多余空格，IE 和旧版 Edge 直接解析失败；用正则.replace(/\s+/g, ' ').trim()清理后再注入 - 按钮用了
pointer-events: none试图透传点击，结果 mask 层也拦截了事件；正确做法是给 mask 容器加pointer-events: none，按钮本体保持默认 - 动画帧率掉到 30fps 以下时，线条会出现“跳帧”感；禁用
will-change: transform，改用transform: translateZ(0)触发 GPU 加速更稳
无规则线条的本质是“可控的随机性”，它不依赖 JS 实时计算，而是靠预设路径 + 精细的 CSS 动画参数达成。真正难的不是写出来，是调出那条让人愿意多看两秒的线——起笔角度、第二拐点延迟、收尾时的 0.3 秒悬停，这些细节没法自动化，得一帧一帧肉眼调。
