这是一款使用纯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); } }
非常简单的几句代码就完成了这个很酷的边框线条动画效果。