← 返回
✏️ 矢量艺术

SVG 线条绘制

通过 SVG stroke-dasharray 和 stroke-dashoffset 属性，创造出优雅的线条绘制动画效果

图标动画

每个图标都以流畅的笔触动画呈现，赋予界面生动的视觉效果

确认

成功状态指示

用户

个人信息入口

盒子

包装配送图标

邮件

消息通知提醒

搜索

内容查找功能

收藏

添加到喜欢列表

品牌标识动画

为品牌 Logo 添加优雅的绘制动画，让首次加载变成一次令人印象深刻的品牌展示时刻

几何图形

悬停查看线条绘制动画效果

圆形

矩形

三角形

五角星

六边形

有机形状

技术实现

SVG 线条动画的核心是利用 stroke-dasharray 和 stroke-dashoffset 属性。通过将虚线间隔设置为路径总长度，再通过动画改变偏移量，实现笔触绘制效果。

  • 纯 CSS 动画，无需 JavaScript
  • 矢量图形，任意缩放不失真
  • 轻量级，文件体积小
  • 可通过 CSS 自定义颜色和样式
  • 支持复杂路径和多段动画
<!-- SVG 线条动画 -->
<svg viewBox="0 0 100 100">
  <path
    d="M10,50 L90,50"
    stroke="#6366f1"
    stroke-width="2"
    fill="none"
    stroke-dasharray="100"
    stroke-dashoffset="100"
  />
</svg>

/* CSS 动画 */
path {
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}