美文网首页
js发光球体特效

js发光球体特效

作者: 每天进步一点点的zh | 来源:发表于2021-07-04 14:50 被阅读0次

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>

相关文章

网友评论

      本文标题:js发光球体特效

      本文链接:https://www.haomeiwen.com/subject/hknmultx.html