js发光球体特效

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。