【推荐理由】赠运费险
【优惠券】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);
}
}
