css3直线运动_纯css3动画--边框线条动画

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。

制作方法:

1、HTML结构

该边框线条动画特效的HTML结构使用的是一个空的

来作为容器。

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::be