手把手教你从零开始创建一个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.动画效果