每日css | 易学教程

在这里插入图片描述

<!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);
    }
}

来源：CSDN

作者：qq_33332184

链接：https://blog.csdn.net/qq_33332184/article/details/103671669

标签

transform

border-radius

position

css

infinite

animation

absolute