使用svg制作一个边框动画

在一个学习的过程中遇到一个动画效果如下图

看了人家的源码发现是使用svg标签来实现的，但是他使用的是path(了解后发现是用于定义一个路径），对于我这个svg小白来说还看不太懂呢…所以，选择了一个相对简单的line，主要是用来绘制直线的。

因为图中动画也只是涉及直线，我就投机取巧了一把，简陋的还原了一下。下面说一下我的实现过程：

首先，定义一个外层div,用于包裹svg标签，svg宽高和父级div一致

<style>
	.box {
            width: 280px;
            height: 200px;
            position: relative;
            overflow: hidden;
            background: #2098ce;
            box-sizing: border-box;
        }
      	svg {
            position: absolute;
            top: 0;
            left: 0;
        }
</style>
<div class="box">
    <svg width="280" height="200"></svg>
</div>

其次，要给svg中添加line标签用于绘制矩形的四个边框，既然是四边形当然就有四条线了，但是这四条线中的属性要注意了，line中有四个属性分别是x1,x2,y1,y2,查阅资料得知，x1和x2就是在x轴上的起点和终点（也有说开始和结束），同理那y1和y2就是y轴上的起点和终点了。了解了这些之后，再来看下面代码中的每个具体的数值是怎么来的。

我们先把这四条线分为两组，一组为top，bottom，另一组为left，right。它们可以被看做是对方的镜像，写出一个的值，另一个也就出来了。

那么，来分析一下动画，其实是每条线都是自身的三倍长，中间一段是没有线条的，当鼠标悬浮后线条顺时针移动，自左向右经过中间的空隙最后是线条最靠左的部分停在x轴的0点处，原来div的上边框被移动到了最右侧，如下图

同理，画出其他三条线

鼠标悬停上，每条线都顺时针旋转

具体代码如下

<style>
    svg line {
          stroke-width: 10;
          stroke: #fff;
          fill: none;
          transition: transform .9s ease-out;
      }
      .box svg line.top,
      .box svg line.bottom {
          stroke-dasharray: 280;
      }

      .box svg line.left,
      .box svg line.right {
          stroke-dasharray: 200;
      }
      /* 顺时针动画 */
      div:hover svg line.top {
          transform: translateX(560px);
      }

      div:hover svg line.bottom {
          transform: translateX(-560px);
      }

      div:hover svg line.left {
          transform: translateY(-400px);
      }

      div:hover svg line.right {
          transform: translateY(400px);
      }
</style>
<svg width="280" height="200">
	<line class="top" x1="280" y1="0" x2="-840" y2="0" />
    <line class="left" x1="0" y1="0" x2="0" y2="600" />
    <line class="bottom" x1="840" y1="200" x2="0" y2="200" />
    <line class="right" x1="280" y1="200" x2="280" y2="-400" />
</svg>

最后的结果就是