本实例实现元素的边框流动特效，主要用到css的伪类、动画
html部分：
<body>
<div class="box">
<h2>css</h2>
</div>
</body>css代码：
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #444;
}
.box{
box-shadow: 0 0 180px #666;
position: relative;
width: 180px;
height: 180px;
background-color: rgba(0,0,0,0.8);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.box h2{
margin: 0;
color: #fff;
font-size: 4em;
font-family: Helvetica, sans-serif;
text-shadow: 2px 2px paleturquoise;
z-index: 1;
}
.box::before{
position: absolute;
width: 100px;
height: 200%;
content: "";
background: linear-gradient(#00ccff,#d500f9);
animation: rotate 5s linear infinite;
}
.box::after{
content: "";
position: absolute;
background: #0e1538;
inset: 2px;
border-radius: 20px;
}
@keyframes rotate {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}演示代码：
https://www.shangjidong.com/demos/css-border-fluent.html
效果如下图：
