loading加载界面 跟b站学的

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>loading</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: '微软雅黑', sans-serif;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: #000;
    }

    h2 {
        color: #000;
        font-size: 6em;
        display: flex;
    }

    h2 span {
        animation: animate 4s linear infinite;
    }

    h2 span:nth-child(1) {
        animation-delay: 0s;
    }

    h2 span:nth-child(2) {
        animation-delay: 0.1s;
    }

    h2 span:nth-child(3) {
        animation-delay: 0.2s;
    }

    h2 span:nth-child(4) {
        animation-delay: 0.3s;
    }

    h2 span:nth-child(5) {
        animation-delay: 0.4s;
    }

    h2 span:nth-child(6) {
        animation-delay: 0.5s;
    }

    h2 span:nth-child(7) {
        animation-delay: 0.6s;
    }

    h2 span:nth-child(8) {
        animation-delay: 0.7s;
    }

    @keyframes animate {
        0%, 100% {
            color: #fff;
            filter: blur(2px);
            text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff,
            0 0 300px #00b3ff,
            0 0 300px #00b3ff;
        }
        25%, 75% {
            color: #000;
            filter: blur(0px);
            text-shadow: none;
        }
    }
</style>
<body>
<h2>
    <span>L</span>
    <span>o</span>
    <span>a</span>
    <span>d</span>
    <span>i</span>
    <span>n</span>
    <span>g</span>
    <span>...</span>
</h2>
</body>
</html>

 

posted @ 2020-06-27 23:04  ukyo--碳水化合物  阅读(357)  评论(0)    收藏  举报