手把手教你从零开始创建一个svg描边动画图片

1. 先在 html 中创建 svg 元素

<svg height="60" width="160"></svg>

2. 在 svg 里面添加矩形元素 rect

  <rect id="shape" height="60" width="160"/>

3. 添加 css 描边动画

  // stroke-dasharray: 第一个数值是实线长度, 第二个数值是间隙长度
  // stroke-dashoffset: 是描边线的偏移量 (正值: 左上角逆时针偏移量; 负值: 左上角顺时针偏移量)
  // stroke-width: 描线宽度
  // fill: 矩形填充色
  // stroke: 描线颜色
  <style>
       @keyframes lineAnimate {
          0% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: 20;
           }
         100% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: -200;
         }
      }
     #shape {
      stroke-width: 6px;
      fill: transparent;
      stroke: #009FFD;
      animation: lineAnimate 3s infinite;
    }

4. 创建一个文本文档

 将写好的代码, 粘贴过来, 保存之后, 修改文件后缀名为 svg

5. 收尾工作

1.svg 标签中添加 xmlns="http://www.w3.org/2000/svg"
2.style 标签移至 svg 标签里面,style 标签中添加 type="text/css"
3. 代码里面不能有注释什么的 

6. 完整代码

 <svg height="60" width="160" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
       @keyframes lineAnimate {
          0% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: 20;
          }
          100% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: -200;
          }
       }
       #shape {
          stroke-width: 6px;
          fill: transparent;
          stroke: #009FFD;
          animation: lineAnimate 3s infinite;
       }
    </style>    
    <rect id="shape" height="60" width="160"/>
</svg>

7. 动画效果