细节与特效 · 耐看的小细节
线条自绘Line drawing
- 优雅
- 有过程
- 手绘感
线条像被一支笔慢慢画出来，从起点延伸到终点，而不是整体淡入。
什么时候用它
图标、插图、流程图首次出现时用它；重复出现的元素再用会显得啰嗦。
参数
stroke-dasharray = total path length · stroke-dashoffset: →0 · 800ms ease-in-out
配方
线条自绘 → 800ms ease-in-out线条自绘 → stroke-dasharray = total path length · stroke-dashoffset: →0
给 AI 的一句话
给这个 SVG 图标加线条自绘：把 stroke-dasharray 和 stroke-dashoffset 都设为路径长度，动画到 dashoffset 0，800ms ease-in-out。