本教程将和大家一起来研究一种奇妙且有趣的边框运动效果。当你用鼠标划过类似图片的内容块时，它的边框将会很神奇的运动起来：内容块的透明度降低，它的四条边框按顺时针方向运动，效果十分奇妙。我们将使用html5 svg和CSS transitions来完成它。

开始之前先来思考一下，然后在去完成效果。

注意：不是所有的浏览器都支持在svg中使用CSS transitions。

我们刚接触这种效果时，并不知道该如何下手制作，但是你可以先观察一条边，比如上部的边，你会注意到，边框是从右到做减少，然后一条新的边再从右边出现运动到左边。当结合4条边来看时，效果是上部的边运动到左边，左边的边运动到下边，下边的边运动到右边，右边的边运动到上部，正好是一周。

你也许能在不使用svg的情况下制作这种效果，甚至不使用额外的元素，只使用伪元素。但是本教程里我们希望研究如何通过svg来制作，并且通过css而不是javascript来控制它。

现在，想一想如何通过svg来实现它。我们想不使用javascript来实现它，但是使用css来计算stroke-dashoffset和stroke-dasharray的值是相当困难的。所以我们决定使用另一种解决方案，使用线条并它们运动起来。

我们使用的线条有三个部分组成。线条的长度是方框的边长的三倍。线条的中间有一个和方框宽度相同的间隙，我们将通过设置stroke-dashoffset的值等于方框的宽度来实现效果。现在，诀窍在于过渡线的位置：

svg的大小设置为方框的大小，所以我们不会看到超出虚线溢出的部分。

我们使用一个div来放置svg

div的宽度和高度设置为和svg一样的200px，并且设置svg为绝对定位。这里重点要注意将线条的描边设置为10，并设置stroke-dasharray属性为200。

div {

width: 200px;

height: 200px;

position: relative;

overflow: hidden;

background: #ddd;

}

svg {

position: absolute;

top: 0;

left: 0;

}

svg line {

stroke-width: 10;

stroke: #000;

fill: none;

stroke-dasharray: 200;

-webkit-transition: -webkit-transform .6s ease-out;

transition: transform .6s ease-out;

}

div:hover svg line {

-webkit-transform: translateX(-400px);

transform: translateX(-400px);

}

当我们用鼠标hoverdiv的时候，线条也要有一些transition效果。我们希望线移动其自身长度三分之二左右，所以在x轴上设置translate为-400px，由于我们在这里不能够设置translation的值为百分比，所以只能使用像素做单位。

下面我们来添加另外几条线，为了便于理解他们的位置和运动方向，来看下面的图片演示。

我们希望线条这样运动，当线条的开始部分移出方框时，和他相垂直的线的后面部分开始进入方框，这样就会制造出一种四条线沿着边框运动的视觉差效果。

让我们来看一看线条运动的坐标系。

左边的线条的坐标为(0,200)和(0,-400)，下边的线条为(200,200)和(-400,200)，右边的线条为(200,0)和(200,600)：

当鼠标hover的时候，需要为每条线设置不同的translation

div:hover svg line.top {

-webkit-transform: translateX(-400px);

transform: translateX(-400px);

}

div:hover svg line.bottom {

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

div:hover svg line.left {

-webkit-transform: translateY(400px);

transform: translateY(400px);

}

div:hover svg line.right {

-webkit-transform: translateY(-400px);

transform: translateY(-400px);

}

现在我们做出了一个基本的效果，让我们来做得更加漂亮一点！

我们可以再方框盒中添加一些文本

D

2012

Broccoli, Asparagus, Curry

再为方框添加一些颜色渐变，各条svg边框间使用box shadow来制作一些间隔。

.box {

width: 300px;

height: 460px;

position: relative;

background: rgba(255,255,255,1);

display: inline-block;

margin: 0 10px;

cursor: pointer;

color: #2c3e50;

box-shadow: inset 0 0 0 3px #2c3e50;

-webkit-transition: background 0.4s 0.5s;

transition: background 0.4s 0.5s;

}

.box:hover {

background: rgba(255,255,255,0);

-webkit-transition-delay: 0s;

transition-delay: 0s;

}

为文本添加一些样式

.box h3 {

font-family: "Ruthie", cursive;

font-size: 180px;

line-height: 370px;

margin: 0;

font-weight: 400;

width: 100%;

}

.box span {

display: block;

font-weight: 400;

text-transform: uppercase;

letter-spacing: 1px;

font-size: 13px;

padding: 5px;

}

.box h3,

.box span {

-webkit-transition: color 0.4s 0.5s;

transition: color 0.4s 0.5s;

}

.box:hover h3,

.box:hover span {

color: #fff;

-webkit-transition-delay: 0s;

transition-delay: 0s;

}

给svg和线条添加样式

.box svg {

position: absolute;

top: 0;

left: 0;

}

.box svg line {

stroke-width: 3;

stroke: #ecf0f1;

fill: none;

-webkit-transition: all .8s ease-in-out;

transition: all .8s ease-in-out;

}

因为方框的背景色在做渐变，所以我们要为线条的transition设置一些延时，否则看不到效果。

.box:hover svg line {

-webkit-transition-delay: 0.1s;

transition-delay: 0.1s;

}

前面我们设置的stroke-dasharray只有一个值，现在我们需要所有的线条和间隔都有不同的值。

.box svg line.top,

.box svg line.bottom {

stroke-dasharray: 330 240;

}

.box svg line.left,

.box svg line.right {

stroke-dasharray: 490 400;

}

最后，我们设置当鼠标划过时不同的转换值。由于我们的方框是300px宽度，水平线将需要的总宽度的三分之二作为过渡。垂直方向的线也是相同的原理。

.box:hover svg line.top {

-webkit-transform: translateX(-600px);

transform: translateX(-600px);

}

.box:hover svg line.bottom {

-webkit-transform: translateX(600px);

transform: translateX(600px);

}

.box:hover svg line.left {

-webkit-transform: translateY(920px);

transform: translateY(920px);

}

.box:hover svg line.right {

-webkit-transform: translateY(-920px);

transform: translateY(-920px);

}

教程就到这里，希望对你有所帮助！