1、使用html5 svg和css3制作邊框運(yùn)動的動畫效果開頭之前先來思量一下，然后在去完成效果。注重：不是全部的掃瞄器都支持在svg中用法css transitions。我們剛接觸這種效果時(shí)，并不知道該如何下手制作，但是你可以先觀看一條邊，比如上部的邊，你會注重到，邊框是從右到做削減，然后一條新的邊再從右邊浮現(xiàn)運(yùn)動到左邊。當(dāng)結(jié)合4條邊來看時(shí)，效果是上部的邊運(yùn)動到左邊，左邊的邊運(yùn)動到下邊，下邊的邊運(yùn)動到右邊，右邊的邊運(yùn)動到上部，正巧是一周。你大概能在不用法svg的狀況下制作這種效果，甚至不用法額外的元素，只用法偽元素。但是本教程里我們希翼討論如何通過svg來制作，并且通過css而不是javascr

2、ipt來控制它?，F(xiàn)在，想一想如何通過svg來實(shí)現(xiàn)它。我們想不用法javascript來實(shí)現(xiàn)它，但是用法css來計(jì)算stroke-dashoffset和stroke-dasharray的值是相當(dāng)困難的。所以我們打算用法另一種解決計(jì)劃，用法線條并它們運(yùn)動起來。我們用法的線條有三個(gè)部分組成。線條的長度是方框的邊長的三倍。線條的中間有一個(gè)和方框?qū)挾认嗤拈g隙，我們將通過設(shè)置stroke-dashoffset的值等于方框的寬度來實(shí)現(xiàn)效果?，F(xiàn)在，訣竅在于過渡線的位置：svg的大小設(shè)置為方框的大小，所以我們不會看到超出虛線溢出的部分。我們用法一個(gè)div來放置svgdiv的寬度和高度設(shè)置為和svg一樣的200

3、px，并且設(shè)置svg為肯定定位。這里重點(diǎn)要注重將線條的描邊設(shè)置為10，并設(shè)置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-

4、out;transition: transform .6s ease-out;div:hover svg line -webkit-transform: translatex(-400px);transform: translatex(-400px);當(dāng)我們用鼠標(biāo)hoverdiv的時(shí)候，線條也要有一些transition效果。我們希翼線移動其自身長度三分之二左右，所以在x軸上設(shè)置translate為-400px，因?yàn)槲覀冊谶@里不能夠設(shè)置translation的值為百分比，所以只能用法像素做單位。下面我們來添加另外幾條線，為了便于理解他們的位置和運(yùn)動方向，來看下面的演示。我們希翼線條這樣運(yùn)動，當(dāng)

5、線條的開頭部分移出方框時(shí)，和他相垂直的線的后面部分開頭進(jìn)入方框，這樣就會創(chuàng)造出一種四條線沿著邊框運(yùn)動的視覺差效果。讓我們來看一看線條運(yùn)動的坐標(biāo)系。左邊的線條的坐標(biāo)為(0,200)和(0,-400)，下邊的線條為(200,200)和(-400,200)，右邊的線條為(200,0)和(200,600)：當(dāng)鼠標(biāo)hover的時(shí)候，需要為每條線設(shè)置不同的translationdiv:hover svg line.top -webkit-transform: translatex(-400px);transform: translatex(-400px);div:hover svg line.bottom

6、 -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);現(xiàn)在我們做出了一個(gè)基本的效果，讓我們來做得越發(fā)美麗一點(diǎn)！我們可以再方框盒中添加一些文本d2012br

7、occoli, 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;transitio

8、n: 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;

9、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:

10、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設(shè)置一些延時(shí)，否則看不到效果。.box:hover svg line -webkit-transition-delay: 0.1s;transition-delay: 0.1s;前面我們設(shè)置的stroke-dasharray惟獨(dú)一個(gè)值，現(xiàn)在我們需要全部的線條和間隔都有不同的值

11、。.box svg line.top,.box svg line.bottom stroke-dasharray: 330 240;.box svg line.left,.box svg line.right stroke-dasharray: 490 400;最后，我們設(shè)置當(dāng)鼠標(biāo)劃過時(shí)不同的轉(zhuǎn)換值。因?yàn)槲覀兊姆娇蚴?00px寬度，水平線將需要的總寬度的三分之二作為過渡。垂直方向的線也是相同的原理。.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.