动画-线条图标描边

望间2023/4/24大约 4 分钟

这是一个使用 SVG 和 CSS 实现的图标线条描边动画效果。当用户将鼠标悬停在图标上时，图标会以动画方式显示其轮廓线条。

效果展示

<div class="container">
  <svg
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200"
    height="200"
  >
    <path
      class="icon-path"
      d="M512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832M512 896c211.2 0 384-172.8 384-384s-172.8-384-384-384S128 300.8 128 512 300.8 896 512 896L512 896zM800 512c0-160-128-288-288-288l0 576C672 800 800 672 800 512zM480 608 243.2 608C249.6 620.8 256 640 262.4 652.8l217.6 0L480 608zM480 416 480 371.2 262.4 371.2C256 384 249.6 403.2 243.2 416L480 416zM480 300.8 480 256 384 256C358.4 268.8 339.2 281.6 320 300.8L480 300.8zM224 537.6l256 0L480 492.8l-256 0c0 6.4 0 12.8 0 19.2S224 524.8 224 537.6zM480 723.2 320 723.2c19.2 19.2 38.4 32 64 44.8l96 0L480 723.2z"
    ></path>
  </svg>
</div>

.container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

@keyframes stroke {
  0% {
    /* 第一个值为线条长度，第二个值为线条间隔空隙 */
    stroke-dasharray: 0, 400px;
  }
  100% {
    stroke-dasharray: 400px, 0;
  }
}

.container .icon-path {
  /* 填充颜色 */
  fill: none;
  /* 轮廓颜色 */
  stroke: gray;
  /* 轮廓宽度 */
  stroke-width: 4;
  /* 轮廓两端形状 */
  stroke-linecap: round;
}

.container .icon:hover {
  animation: stroke 1s;
}

代码解析

SVG 结构

这个效果的核心是使用 SVG 技术来创建图标轮廓。

使用 <svg> 标签定义了一个 200x200 像素的图标容器
通过 viewBox="0 0 1024 1024" 设置了 viewBox 属性，确保图标在任何尺寸下都能保持清晰度
使用 <path> 元素定义了图标形状，其中 d 属性包含了绘制路径的坐标数据
为路径元素添加了 icon-path 类，以便通过 CSS 控制其样式和动画

CSS 动画原理

这个动画效果主要依靠 CSS 的 stroke-dasharray 属性和 @keyframes 规则实现：

stroke-dasharray 属性：
- 用于创建虚线效果，接受两个值，第一个值表示线段长度，第二个值表示线段之间的间隔
- 我们通过在动画中改变这两个值的比例，创造出线条"绘制"的效果
动画实现：
- 在 stroke 关键帧动画中，我们从 stroke-dasharray: 0, 400px 开始（完全是间隔，没有可见线段）
- 动画结束时变为 stroke-dasharray: 400px, 0（完全是线段，没有间隔）
- 这种变化创造了线条逐渐显示的视觉效果
触发机制：
- 使用 :hover 伪类，当鼠标悬停在图标上时触发动画
- 动画持续时间设置为 1 秒，提供流畅的视觉体验

使用方法

自定义样式

你可以根据需要调整以下样式参数，以创建不同的视觉效果：

线条颜色：修改 .icon-path 中的 stroke 属性
线条宽度：调整 .icon-path 中的 stroke-width 属性
动画速度：修改 animation 属性中的时间值（当前为 1s）
线条端点样式：调整 .icon-path 中的 stroke-linecap 属性（可选值：butt、round、square）
图标尺寸：修改 <svg> 标签中的 width 和 height 属性

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画菜单按钮</title>
    <style>
      .container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      @keyframes stroke {
        0% {
          /* 第一个值为线条长度，第二个值为线条间隔空隙 */
          stroke-dasharray: 0, 400px;
        }
        100% {
          stroke-dasharray: 400px, 0;
        }
      }

      .container .icon-path {
        /* 填充颜色 */
        fill: none;
        /* 轮廓颜色 */
        stroke: gray;
        /* 轮廓宽度 */
        stroke-width: 4;
        /* 轮廓两端形状 */
        stroke-linecap: round;
      }

      .container .icon:hover {
        animation: stroke 1s;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="200"
        height="200"
      >
        <path
          class="icon-path"
          d="M512 832c-179.2 0-320-140.8-320-320s140.8-320 320-320 320 140.8 320 320S691.2 832 512 832M512 896c211.2 0 384-172.8 384-384s-172.8-384-384-384S128 300.8 128 512 300.8 896 512 896L512 896zM800 512c0-160-128-288-288-288l0 576C672 800 800 672 800 512zM480 608 243.2 608C249.6 620.8 256 640 262.4 652.8l217.6 0L480 608zM480 416 480 371.2 262.4 371.2C256 384 249.6 403.2 243.2 416L480 416zM480 300.8 480 256 384 256C358.4 268.8 339.2 281.6 320 300.8L480 300.8zM224 537.6l256 0L480 492.8l-256 0c0 6.4 0 12.8 0 19.2S224 524.8 224 537.6zM480 723.2 320 723.2c19.2 19.2 38.4 32 64 44.8l96 0L480 723.2z"
        ></path>
      </svg>
    </div>
  </body>
</html>