【推荐理由】赠运费险
【优惠券】20 【券后价】59.00
【下单链接】18¥ CZ0001 G5fHdEqOsnB¥
这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。
制作方法:
1、HTML结构
该边框线条动画特效的HTML结构使用的是一个空的<div>来作为容器。
<div class="bb"></div>
2、CSS样式
该边框线条动画特效的两条动画的线条分别使用.bb::before和.bb::after来制作,并使用animation调用clipMe帧动画来完成线条的运动效果。
.bb, .bb::before, .bb::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .bb { width: 200px; height: 200px; margin: auto; background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1); color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .bb::before, .bb::after { content: ''; z-index: -1; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .bb::before { animation-delay: -4s; } .bb:hover::after, .bb:hover::before { background-color: rgba(255, 0, 0, 0.3); } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220.0px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220.0px, 0px); } 50% { clip: rect(218.0px, 220.0px, 220.0px, 0px); } 75% { clip: rect(0px, 220.0px, 220.0px, 218.0px); } }
非常简单的几句代码就完成了这个很酷的边框线条动画效果!
完整代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div class="cont"> <div class="bb"></div> </div> </body> </html>
html,body{ margin: 0;padding: 0; background: #101010; } .cont{ width:500px; margin: 50px auto; } .bb{ position: relative; width: 200px; height: 200px; background: #666666; border: 1px solid #5EF75E; } .bb:before,.bb:after{ content: " "; display: block; position: absolute; width:220px; height:220px; top: -10px; left: -10px; border:2px solid #00FF00; z-index:10; box-sizing: border-box; -webkit-animation: clipAni 4s infinite linear; } .bb:before{ -webkit-animation-delay: -2s; } @keyframes clipAni{ 0%,100%{ clip:rect(0px,220px,220px,217px); } 25%{ clip:rect(0px,220px,3px,0px); } 50%{ clip:rect(0px,3px,220px,0px); } 75%{ clip:rect(217px,220px,220px,0px); } }