css简单特效

最新推荐文章于 2022-04-01 11:29:30 发布

m0_52434369

最新推荐文章于 2022-04-01 11:29:30 发布

阅读量105

点赞数

文章标签： javascript jquery vue.js html css

本文链接：https://blog.csdn.net/m0_52434369/article/details/118422565

版权

用css实现的特效，发光的小球，可以直接复制看效果哟！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 class="aura"></div>
    <!-- <div class="box"></div> -->

    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>