- 정보공유
[퍼블리싱] 박스 테두리를 따라서 흐르는 효과
<style>
.square{position:relative;padding:10px;background:#000;color:#fff;text-align:center}
.square i{position:absolute;text-indent:-9999px;background:rgba(255,255,255,.7)}
.square i.line1{width:2px;height:100%;bottom:0;left:0;animation:line1 5s infinite;-webkit-animation:line1 5s infinite;-moz-animation:line1 5s infinite}
.square i.line2{width:100%;height:2px;top:0;left:0;animation:line2 5s infinite;-webkit-animation:line2 5s infinite;-moz-animation:line2 5s infinite}
.square i.line3{width:2px;height:100%;top:0;right:0;animation:line3 5s infinite;-webkit-animation:line3 5s infinite;-moz-animation:line3 5s infinite}
.square i.line4{width:100%;height:2px;bottom:0;right:0;animation:line4 5s infinite;-webkit-animation:line4 5s infinite;-moz-animation:line4 5s infinite}
@keyframes line1 {
0% { height:0; }
25%, 100% { height:100%; }
}
@-webkit-keyframes line1 {
0% { height:0; }
25%, 100% { height:100%; }
}
@-moz-keyframes line1 {
0% { height:0; }
25%, 100% { height:100%; }
}
@keyframes line2 {
0%, 25% { width:0; }
50%, 100% { width:100%; }
}
@-webkit-keyframes line2 {
0%, 25% { width:0; }
50%, 100% { width:100%; }
}
@-moz-keyframes line2 {
0%, 25% { width:0; }
50%, 100% { width:100%; }
}
@keyframes line3 {
0%, 50% { height:0; }
75%, 100% { height:100%; }
}
@-webkit-keyframes line3 {
0%, 50% { height:0; }
75%, 100% { height:100%; }
}
@-moz-keyframes line3 {
0%, 50% { height:0; }
75%, 100% { height:100%; }
}
@keyframes line4 {
0%, 75% { width:0; }
100% { width:100%; }
}
@-webkit-keyframes line4 {
0%, 75% { width:0; }
100% { width:100%; }
}
@-moz-keyframes line4 {
0%, 75% { width:0; }
100% { width:100%; }
}
</style>
<a href="#none" class="square">
BUTTON
<i class="line1">1</i>
<i class="line2">2</i>
<i class="line3">3</i>
<i class="line4">4</i>
</a>