js发光球体特效
2021-07-04 本文已影响0人
每天进步一点点的zh
js发光球体特效，可以直接复制看效果哟，快来试试吧！
<!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>
