圖片邊框運(yùn)動(dòng)動(dòng)畫實(shí)現(xiàn)

1、圖片邊框運(yùn)動(dòng)動(dòng)畫實(shí)現(xiàn)如何實(shí)現(xiàn)的邊框運(yùn)動(dòng)，這點(diǎn)在一些移動(dòng)端的效果的常常應(yīng)用，下面是圖標(biāo)邊框運(yùn)動(dòng)實(shí)現(xiàn)代碼： border animation effect with svg -> -> import url( font-face font-weight: normal; font-style: normal; font-family: 'codropsicons' src: url('./fonts/codropsicons/codropsicons.eot'); src: url('./fonts/codropsicons/codropsico

2、ns.eot?iefix') format('embedded-opentype'), url('./fonts/codropsicons/codropsicons.woff') format('woff'), url('./fonts/codropsicons/codropsicons.ttf') format('truetype'), url('./fonts/codropsicons/codropsicons.svgcodropsicons') format('svg'

3、); *, *:after, *:before -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .clearfix:before, .clearfix:after content: '' display: table; .clearfix:after clear: both; body background: 2c3e50; color: ecf0f1; font-size: 100%; line-height: 1.25; font-family: 

4、9;lato', arial, sans-serif; a color: 95a5a6; text-decoration: none; outline: none; a:hover, a:focus color: fff; .codrops-header margin: 0 auto; padding: 2em; text-align: center; .codrops-header h1 margin: 0; font-weight: 300; font-size: 2.5em; .codrops-header h1 span display: block; padding: 0 0

5、 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; /* to navigation style */ .codrops-top width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; .codrops-top a display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 1px; .codrops-top span.righ

6、t float: right; .codrops-top span.right a display: block; float: left; .codrops-icon:before margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons' line-height: 1; speak: none; -webkit-font-smoothing: antialiased; .codro

7、ps-icon-drop:before content: "e001" .codrops-icon-prev:before content: "e004" section padding: 4em 2em; text-align: center; section h2 font-weight: 300; font-size: 2em; padding: 1em 0; .codrops-header+section padding-top: 1.5em; .related p font-size: 1.5em; .relat

8、ed>a background: rgba(0, 0, 0, 0.05); display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; .related a:hover background-color: rgba(0, 0, 0, 0.4); .related a img max-width:

9、 100%; opacity: 0.8; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; .related a:hover img, .related a:active img opacity: 1; .related a h3 margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left; media screen and (max-width: 25em) .codrops-icon span display: none; .box widt

10、h: 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

11、, 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-si

12、ze: 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; .box svg position: absolute; top: 0; left: 0; .box svg line stroke-width: 3; stroke: ecf0f1; fil

13、l: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; .box:hover svg line -webkit-transition-delay: 0.1s; transition-delay: 0.1s; .box svg line.top, .box svg line.bottom stroke-dasharray: 330 240; .box svg line.left, .box svg line.right stroke-dasharray: 490 400; .box:ho

14、ver 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); /* alternatives */ /* color */ .demo-2 .box box-shadow: inset 0 0 0 10px 2c3e50; .demo-2 .box:hover h3, .demo-2 .box: