每日css

爱被打了一巴掌 2023-06-24 14:26 12阅读 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>
        <link rel="stylesheet" href="css/my.css"/>
    </head>
    <body>
        <div class="earth">
            <div class="mapWrapper">
                <img src="svg/worldMapSimplified.svg"/>
            </div>
            <div class="faceWrapper">
                <div class="eye left">
                    <div class="whiteLeft"></div>
                    <div class="whiteRight"></div>
                </div>
                <div class="eye right">
                    <div class="whiteLeft"></div>
                    <div class="whiteRight"></div>
                </div>
                <div class="blush left"></div>
                <div class="blush right"></div>
                <div class="mouth"></div>
            </div>
        </div>
        <div class="stars"></div>
    </body>
    </html>

*{ 
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    body{ 
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #1b2233;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-in-out;
        font-family:"Great Vibes", cursive;
        overflow: hidden;
    }
    .earth{ 
        position: relative;
        background-color: #69d1db;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 2;
        box-shadow: 0 0 200px #2b5970;
        animation: earth 5s ease-in-out infinite;
    }
    .mapWrapper{ 
        position: absolute;
        top: -20px;
        left: -45px;
        height: 340px;
        animation: rotateEarth 10s ease-in-out infinite;
    }
    .mapWrapper img { 
        height: 100%;
    }
    .faceWrapper{ 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        animation: rotateEarth 10s ease-in-out infinite;
        z-index: 3;
    }
    .eye{ 
        width: 50px;
        height: 50px;
        position: absolute;
        top: 110px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #222;
    }
    .eye.left{ 
        left: 80px;
        animation: eyeBlink 3s linear infinite;
    }
    .eye.right{ 
        right: 80px;
        animation: eyeBlink 3s linear infinite;
    }
    .whiteLeft{ 
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;
        transform: translate3d(22px, 9px, 0);
    }
    .whiteRight{ 
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 50%;
        transform: translate3d(35px, 0px, 0);
    }
    .blush{ 
        position: absolute;
        top: 170px;
        width: 18px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(248, 195, 194, 0.75);
    }
    .blush.left{ 
        left: 100px;
    }
    .blush.right{ 
        right: 100px;
    }
    .mouth{ 
        position: absolute;
        background-color: #d13d40;
        border-radius: 25px;
        height: 20px;
        width: 20px;
        top: 200px;
        left: 0;
        right: 0;
        margin: auto;
        overflow: hidden;
    }
    .stars{ 
        width: 100%;
        height: 100vh;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI0MCAyNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0MCAyNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IHg9IjEwNiIgeT0iOTAiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI3NCIgeT0iNjMiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIyMyIgeT0iNjYiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI1MCIgeT0iMTEwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNjMiIHk9IjEyOCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjQ1IiB5PSIxNDkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI5MiIgeT0iMTUxIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNTgiIHk9IjgiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNDciIHk9IjMzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iOTEiIHk9IjQzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTY5IiB5PSIyOSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE4MiIgeT0iMTkiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNjEiIHk9IjU5IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTM4IiB5PSI5NSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE5OSIgeT0iNzEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIzIiBoZWlnaHQ9IjMiLz48cmVjdCB4PSIyMTMiIHk9IjE1MyIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjIiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEyOCIgeT0iMTYzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMjA1IiB5PSIxNzQiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNTIiIHk9IjIwMCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjUyIiB5PSIyMTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiLz48cmVjdCB5PSIxOTEiIGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxMTAiIHk9IjE4NCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjwvc3ZnPg==);
        position: absolute;
        top: 0;
        animation: spin 240s linear infinite;
    }
    @keyframes earth { 
        0%,100%{ 
            transform: translate3d(0,5px,0);
        }
        50%{ 
            transform: translate3d(0,-5px,0);
        }
    }
    @keyframes rotateEarth { 
        0%, 100% { 
            transform: translate3d(-45px, 0, 0);
        }
        50%{ 
            transform: translate3d(0,0px,0);
        }
    }
    @keyframes spin { 
        from{ 
            transform: rotate(0deg);
        }
        to{ 
            transform: rotate(360deg);
        }
    }
    @keyframes eyeBlink { 
        0%, 30%, 40%, 100% { 
            transform: scale(1);
        }
        33%, 37% { 
            transform: scale(1, 0);
        }
    }

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