五彩斑斓黑加动感光晕特效

偏执的太偏执、 2021-07-24 21:27 253阅读 0赞

<!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>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
            body{ 
                display: flex;
                min-height: 100vh;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: #2A3137;
            }
            .outer-circle{ 
                position: relative;
                height: 200px;
                width: 200px;
                background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
                border-radius: 50%;
                animation:rotate 1.5s linear infinite;
    
            }
            .inner-circle{ 
                height: 180px;
                width: 180px;
                position: absolute;
                background-color: black;
                top:10px;
                left: 10px;
                border-radius: 50%;
                z-index:2;
               
            }
            /* 翻转色相,一个色调360度不断旋转 */
            @keyframes rotate { 
                0%{ 
                    filter:hue-rotate(0deg);
                }
                100%{ 
                    filter:hue-rotate(360deg);
                }
                
            }
            .outer-circle span{ 
                position: absolute;
                height: 200px;
                width: 200px;
                background:linear-gradient(#14ffe9,#ffeb3b,#ff00e0);
                border-radius: 50%;
            }
            span:nth-child(1){ 
                filter:blur(5px);
            }
            span:nth-child(2){ 
                filter:blur(20px);
            }
            span:nth-child(3){ 
                filter:blur(25px);
            }
            span:nth-child(4){ 
                filter:blur(100px);
            }
        </style>
    </head>
    <body>
    
        <div class='outer-circle'>
            <div class='inner-circle'></div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    
        <script>
        </script>
    </body>
    </html>