每日css

╰+攻爆jí腚メ 2023-06-17 11:52 10阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="loading.css"/>
    </head>
    <body>
        <div class="loading">
            <span>loading...</span>
        </div>
    </body>
    </html>

body{ 
        margin: 0;
        padding: 0;
        background-color: #34495e;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 微软雅黑;
    }
    .loading{ 
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border-radius: 50%;
        border-top:10px solid #e74c3c;
        position: relative;
        animation: al 2s linear infinite;
    }
    .loading::before,.loading::after{ 
        content:'';
        width:200px;
        height: 200px;
        position: absolute;
        left:0;
        top:-10px;
        border-radius: 50%;
        box-sizing: border-box;
    }
    .loading::before{ 
        border-top:10px solid #e67e22;
        transform: rotate(120deg);
    }
    .loading::after{ 
        border-top:10px solid #3498db;
        transform: rotate(240deg);
    }
    .loading span{ 
        position: absolute;
        width: 200px;
        height: 200px;
        color: #fff;
        text-align: center;
        line-height: 200px;
        animation: a2 2s linear infinite;
    }
    @keyframes al { 
        to{ 
            transform: rotate(360deg);
        }
    }
    @keyframes a2 { 
        to{ 
            transform: rotate(-360deg);
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128193840234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0,size_16,color_FFFFFF,t_70