css 实现svg动态图标效果

效果演示：

 实现思路：主要是通过css的stroke相关属性来设置实现的。

 html代码:

css代码：

.icon1 {
        /* 填充颜色 */
        fill: none;
        /* 图形元素的外轮廓颜色 */
        stroke: black;
        /* 图形元素的外轮廓宽度 */
        stroke-width: 10;
        /* 两端的形状 */
        stroke-linecap: round;
      }
      @keyframes move {
        0% {
          /* 指定线条的长度和间距，第一个参数为长度，第二个为间距 */
          stroke-dasharray: 0, 600px;
        }

        100% {
          stroke-dasharray: 600px, 0;
        }
      }
      .icon:hover {
        animation: move 1s;
      }