纯CSS无法实现真实手绘路径动画，但可用clip-path逐步显形+filter强化线条模拟素描浮现效果；推荐inset()动画配合grayscale(100%) contrast(3) brightness(0.6)等参数，并注意overflow、will-change及图层干扰问题。
用 filter + clip-path 模拟“素描笔画涂满”效果
纯 CSS 实现不了真正意义上的手绘路径动画（比如模拟铅笔一笔一笔画轮廓），但可以用 clip-path 从无到有裁出图片区域，再叠加 filter: grayscale(100%) contrast(2) brightness(0.8) 强化线条感，视觉上接近“素描浮现”。关键不是“画”，而是“逐步显形”。
-
clip-path必须用inset()或polygon()配合animation，不能用url(#svg-clip)—— Safari 对外部 SVG clip-path 的 CSS 动画支持不稳定 - 推荐用
inset(100% 0 0 0)→inset(0)，从下往上“推入”画面，比从中心扩散更像笔触推进 - 图片需设
display: block，否则clip-path在部分 Chrome 版本里会失效
clip-path 动画卡顿或闪一下？检查这三处
这个动画在低端设备或复杂页面里容易掉帧、初始态错位，不是写法错了，是渲染链路被干扰了。
- 父容器没设
overflow: hidden→ 动画第一帧可能看到图片溢出，尤其用inset()时 - 图片没加
will-change: clip-path→ Chrome/Edge 下动画前两帧常掉帧，加上后触发图层提升 - 用了
transform: scale()或filter: blur()同时存在 → 这两个属性会强制重绘整个图层，和clip-path动画争资源，建议剥离到独立<div>包裹
要“笔画感”而不是“淡入”，filter 参数得调狠一点
默认的 grayscale() + contrast() 太柔和，看不出铅笔线。素描的核心是高对比+弱灰阶+边缘强化，不是去色。
- 起始态用
filter: grayscale(100%) contrast(3) brightness(0.6) saturate(0.2)—— 亮度压低才能让后续“显形”有反差 - 结束态别直接回
none，改成filter: grayscale(20%) contrast(1.4) brightness(1.1)，保留一点手绘质感 - 避免用
sepia()或hue-rotate()—— 它们会引入暖色偏移，破坏铅笔稿的冷灰调
真需要逐笔绘制？得切 SVG 路径 + JS 控制
CSS 做不到按真实笔画顺序描边，比如先画眼睛再画鼻子。这时候必须把图片转成 SVG 轮廓路径，用 stroke-dasharray + stroke-dashoffset 动画。
立即学习“前端免费学习笔记（深入）”；
- 在线工具如 Vector Magic 或 Inkscape 的“位图描摹”能生成较干净的路径，但复杂照片会糊成一团，适合线条明确的手绘稿
- 导出 SVG 后，给每条
<path>加class="stroke"，用 JS 按数组顺序依次设置style.strokeDashoffset - 别用
getTotalLength()直接读 —— 某些自动生成的路径含transform，长度不准，先getBBox()校验范围再算
最麻烦的其实是路径分组逻辑：人眼觉得“一笔画完”的区域，SVG 可能拆成 5 条不相连的 <path>，得手动合并或加延迟调度。这事没有银弹，调一次就得看三次效果。
