深圳装修公司电话号码大全_云南企业建站_广州网站建设工作室_个人微信管理系统

 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;
}