<div class="bb"></div>
这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和animation、keyframes来制作线条运动效果。
制作方法
html结构
该边框线条动画特效的HTML结构使用的是一个空的<div>来作为容器。
1. <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的样式及边框的样式*/ .bb { width: 200px; height: 200px; margin: auto; background: 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; } /*前一个伪类的动画提前4s执行*/ .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); } }
在使用中需要注意:
1. 两个伪类配合使用;除了动画开始时间不一致,其余都有一样;
2. box-shadow的使用;
3. animation和@keyframes配对使用,从而控制每个节点的变化;
4.margin:-5%的使用,使伪类元素超出容器的部分;