图片/图形
CSS3炫酷元素边框线条动画特效
PetitQ
这是一款使用纯 CSS3 制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和 keyframes 来制作线条运动效果。
HTML 结构
该边框线条动画特效的 HTML 结构使用的是一个空的<div>来作为容器。
也想出现在这里？联系我们吧
<div class="bb"></div>
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);
}}
非常简单的几句代码就完成了这个很酷的边框线条动画效果。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
