js發(fā)光球體特效，可以直接復制看效果喲，快來試試吧掌眠！
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
*{
padding:0
}
body{
background-color: black;
}
.aura{
/* 居中 */
/* 當使用：top: 50%;left: 50%;通贞， 是以左上角為原點，故不處于中心位置水孩，
translate(-50%,-50%) 作用是，往上（x軸）,左（y軸）移動自身長寬的 50%琐驴，以使其居于中心位置俘种。 */
position: absolute;
left:50%;
border-radius: 50%;
top:50%;
transform: translate(-50%,-50%);
background-color: rgb(17, 16, 16);
width:400px;
height:400px;
z-index: 10;
}
li{
list-style: none;
position: absolute;
left:50%;
transform: translate(-50%,-50%);
top:50%;
border-radius: 44% 50% 40% 51%/50% 53% 53% 47%;
background-color: rgb(206, 240, 54);
width:400px;
height:400px;
animation: aa linear 5s infinite;
filter: blur(30px);
mix-blend-mode: screen;
}
@keyframes aa{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform: translate(-50%,-50%) rotate(360deg)}
}
li:nth-of-type(2){
animation-delay: 1s;
background-color: rgb(214, 248, 23);
}
li:nth-of-type(3){
animation-delay: 2s;
background-color: rgb(250, 7, 7);
}
li:nth-of-type(2){
animation-delay: 3s;
background-color: rgb(30, 246, 253);
}
</style>
</head>
<body>
</div>
<!-- <div class="box"></div> -->
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
