css实现日出日落效果

richest_qi
已于 2022-08-09 12:34:59 修改
阅读量854
点赞数
分类专栏： css 文章标签： animation 日出日落
于 2022-08-09 09:13:29 首次发布
本文链接：https://blog.csdn.net/qzw752890913/article/details/126240459
版权
css 专栏收录该内容
69 篇文章 4 订阅
订阅专栏
【需求描述】css实现日出日落效果（摘自网友）。
在这里插入图片描述
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Animated Sunrise to Sunset </title>
    <style>
    @-webkit-keyframes sunrise {
        from {
            transform: rotate(-45deg);
        }

        to {
            transform: rotate(315deg);
        }
    }

    @keyframes sunrise {
        from {
            transform: rotate(-45deg);
        }

        to {
            transform: rotate(315deg);
        }
    }

    @-webkit-keyframes moonrise {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(180deg);
        }
    }

    @keyframes moonrise {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(180deg);
        }
    }

    @-webkit-keyframes dawn {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        60% {
            opacity: 0;
        }
    }

    @keyframes dawn {
        0% {
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        60% {
            opacity: 0;
        }
    }

    @-webkit-keyframes noon {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
    }

    @keyframes noon {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
    }

    @-webkit-keyframes dusk {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        70% {
            opacity: 1;
        }
        90% {
            opacity: 0;
        }
    }

    @keyframes dusk {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        70% {
            opacity: 1;
        }
        90% {
            opacity: 0;
        }
    }

    @-webkit-keyframes midnight {
        0% {
            opacity: 1;
        }
        25% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
    }

    @keyframes midnight {
        0% {
            opacity: 1;
        }
        25% {
            opacity: 0;
        }
        50% {
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
    }

    body {
        --animation-speed: 24s;
        background-color: rgb(37, 29, 24);
    }

    .sky {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        max-height: 600px;
        overflow: hidden;
    }

    .sky__phase {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transition: opacity 0.2s;
    }

    .sky__dawn {
        background: linear-gradient(
            0deg,
            rgba(254, 215, 102, 1) 0%,
            rgba(205, 237, 246, 1) 100%
        );
        -webkit-animation: linear dawn infinite var(--animation-speed);
                animation: linear dawn infinite var(--animation-speed);
    }

    .sky__noon {
        background: linear-gradient(
            0deg,
            rgba(205, 237, 246, 1) 0%,
            rgba(36, 123, 160, 1) 100%
        );
        -webkit-animation: linear noon infinite var(--animation-speed);
                animation: linear noon infinite var(--animation-speed);
    }

    .sky__dusk {
        background: linear-gradient(
            0deg,
            rgba(255, 32, 110, 1) 0%,
            rgba(10, 0, 94, 1) 100%
        );
        -webkit-animation: linear dusk infinite var(--animation-speed);
                animation: linear dusk infinite var(--animation-speed);
    }

    .sky__midnight {
        background: linear-gradient(
            0deg,
            rgba(2, 0, 20, 1) 0%,
            rgba(10, 0, 94, 1) 100%
        );
        -webkit-animation: linear midnight infinite var(--animation-speed);
                animation: linear midnight infinite var(--animation-speed);
    }

    .orbit {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 200px auto;
        transform: rotate(-45deg);
        -webkit-animation: linear sunrise infinite var(--animation-speed);
                animation: linear sunrise infinite var(--animation-speed);
    }

    @media (min-width: 768px) {
        .sky {
            min-height: 600px;
        }
        .orbit {
            width: 700px;
            height: 700px;
            margin: 150px auto;
        }
    }

    @media (min-width: 940px) {
        .orbit {
            width: 800px;
            height: 800px;
        }
    }

    @media (min-width: 1200px) {
        body {
            --animation-speed: 28s;
        }
        .orbit {
            width: 1000px;
            height: 1000px;
            margin: 200px auto;
        }
    }

    @media (min-width: 1500px) {
        body {
            --animation-speed: 30s;
        }
        .orbit {
            width: 1300px;
            height: 1300px;
        }
    }

    .sun {
        position: absolute;
        top: -40px;
        left: -40px;
        width: 80px;
        height: 80px;
        background-color: rgb(254, 215, 102);
        border-radius: 50%;
        box-shadow: 0 0 14px 14px rgba(254, 215, 102, 0.2);
    }

    .moon {
        position: absolute;
        bottom: -40px;
        right: -40px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 7px 7px rgba(255, 255, 255, 0.2);
    }

    #sky__stars > div {
        width: 3px;
        height: 3px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
    }
    </style>
    </head>
<body>
    <div class="sky">
        <div class="sky__phase sky__dawn"></div>
        <div class="sky__phase sky__noon"></div>
        <div class="sky__phase sky__dusk"></div>
        <div class="sky__phase sky__midnight">
            <div id="sky__stars"><div style="left: 46%; top: 55%;"></div><div style="left: 21%; top: 40%;"></div><div style="left: 53%; top: 53%;"></div><div style="left: 65%; top: 58%;"></div><div style="left: 49%; top: 43%;"></div><div style="left: 53%; top: 15%;"></div><div style="left: 33%; top: 24%;"></div><div style="left: 99%; top: 89%;"></div><div style="left: 52%; top: 83%;"></div><div style="left: 6%; top: 73%;"></div><div style="left: 8%; top: 71%;"></div><div style="left: 96%; top: 58%;"></div><div style="left: 47%; top: 36%;"></div><div style="left: 40%; top: 21%;"></div><div style="left: 40%; top: 30%;"></div><div style="left: 86%; top: 7%;"></div><div style="left: 38%; top: 12%;"></div><div style="left: 11%; top: 1%;"></div><div style="left: 33%; top: 56%;"></div><div style="left: 83%; top: 12%;"></div><div style="left: 63%; top: 64%;"></div><div style="left: 53%; top: 84%;"></div><div style="left: 50%; top: 2%;"></div><div style="left: 77%; top: 52%;"></div><div style="left: 82%; top: 23%;"></div><div style="left: 29%; top: 20%;"></div><div style="left: 56%; top: 56%;"></div><div style="left: 69%; top: 94%;"></div><div style="left: 15%; top: 57%;"></div><div style="left: 33%; top: 35%;"></div><div style="left: 33%; top: 94%;"></div><div style="left: 57%; top: 13%;"></div><div style="left: 4%; top: 60%;"></div><div style="left: 18%; top: 84%;"></div><div style="left: 68%; top: 55%;"></div><div style="left: 75%; top: 11%;"></div><div style="left: 73%; top: 64%;"></div><div style="left: 72%; top: 81%;"></div><div style="left: 91%; top: 96%;"></div><div style="left: 35%; top: 67%;"></div></div>
        </div>
        <div class="orbit">
            <div class="sun"></div>
            <div class="moon"></div>
        </div>
    </div>
 </body></html>