1、html
<div class="box">流水灯边框</div>
2、css
.box {
overflow: hidden;
/* 撑开父盒子大小 */
padding: 15px 10px;
/* 小圆角 */
border-radius: 5px;
/* 文字颜色、大小 */
color: #66ddf7;
/* 简单定位 */
position: relative;
/* 显示层级最上面 */
z-index: 0;
}
.box::before {
content: "";
/* 宽高要超过父级默认的大小 */
width: 200%;
height: 200%;
/* 基础背景颜色 */
background-color: #22292f;
/* conic-gradient 围绕中心点旋转的渐变 */
background-image: conic-gradient(transparent, #17f, transparent 30%);
/* 定位到中间 */
position: absolute;
left: -50%;
top: -50%;
/* 显示层级最底层 */
z-index: -2;
/* 旋转整个灯光渐变这一层 */
animation: rotate 5s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.box::after {
content: "";
/* 往内撑开盒子宽高,正好小一圈当做边框 */
inset: 3px;
background: #000;
border-radius: 5px;
position: absolute;
/* 显示层级中间,盖住最后一层的灯光 */
z-index: -1;
}