css动画边框动画案例 |animate.css 签字动画

.border {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #000;
overflow: hidden;
margin: 0 auto;
}
.border:before {
content:'';
position: absolute;
top: 0;
left: -2px;
height: 2px;
width: 0;
background-color: #000;
animation: border1 1s infinite;
}
.border:after {
content:'';
position: absolute;
right: -2px;
top: 0;
width: 0;
height: 2px;
background-color: #000;
animation: border2 1s infinite;
}
@keyframes border1 {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes border2 {
from {
width: 0;
}
to {
width: 100%;
}
}

上面这段代码创建了一个大小为200px的正方形边框，而边框是由两条横线组成的，在before和after伪元素中定义了这两条横线的位置和属性，然后使用CSS动画的@keyframes定义了这两条横线的动画效果。

border1和border2这两个动画的关键帧是相同的，都是从0到100%的宽度变化效果。

使用这种边框动画，大家能够让网页看起来更加生动有趣。