css实现日出日落效果

【需求描述】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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值