使用HTML5 SVG和CSS3制作边框运动的动画效果

本教程将和大家一起来研究如何使用html5 svg和css transitions来制作一种十分奇妙的图片边框运动的动画效果。









查看演示

下载地址

本教程将和大家一起来研究一种奇妙且有趣的边框运动效果。当你用鼠标划过类似图片的内容块时，它的边框将会很神奇的运动起来：内容块的透明度降低，它的四条边框按顺时针方向运动，效果十分奇妙。我们将使用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);
}

当我们用鼠标hover

div

的时候，线条也要有一些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);
}

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

查看演示

下载地址

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141018229.html

Previous:

上一篇：如何实现“DESIGN SAMSUNG”网站的瀑布流效果

Next:

下一篇：使用html5 svg和css3制作神奇的图片hover效果