用原生HTML+CSS+JS制作可控的白夜交替动画-CFANZ编程社区

利用上次的做的开关做了一个白夜交替的动画

运行效果展示

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        body {
            transition: all 0.4s linear 0.1s;
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }

        .btn {
            overflow: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 70px;
            width: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 3px solid rgba(211, 211, 211, 0.541);
        }

        span {
            opacity: 0;
            height: 50px;
            width: 50px;
            user-select: none;
            font-size: 25px;
            line-height: 50px;
            text-align: center;
            background-color: black;
            color: white;
            border-radius: 50%;
            box-shadow: 0px 0px 10px cyan;
            text-shadow: 0px 0px 8px gray;
            font-family: "幼圆";
            transition: all 0.2s ease-in-out;
        }

        span:hover {
            transition: 0.3s;
            transform: scale(1.05);
        }

        .wrap {
            height: 500px;
            width: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* border: 1px solid gray; */
        }

        .wrap::before {
            content: '';
            position: absolute;
            height: 200px;
            width: 500px;
            top: 300px;
            backdrop-filter: blur(50px);
            z-index: 1000;
        }

        .sun,
        .moon {
            height: 300px;
            width: 300px;
            border-radius: 50%;
        }

        .sun {
            display: none;
            background-color: orange;
            box-shadow: 0px 0px 20px orange;
        }

        .moon {
            display: block;
            background-color: cyan;
            box-shadow: 0px 0px 20px cyan;
        }

        @keyframes toright {
            from {
                transform: translateY(-60px);
            }

            to {
                transform: translateY(0px);
            }
        }

        @keyframes toleft {
            from {
                transform: translateY(0px);
            }

            to {
                transform: translateY(-60px);
            }
        }

        @keyframes toTop {
            from {
                transform: translateY(-200px);
            }

            to {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <!-- 开关 -->
    <div class="btn" onmouseover="Show_btn()" onmouseleave="Hide_btn()">
        <span onclick="Super_switch()">夜</span>
    </div>
    <!-- 主体部分 -->
    <div class="wrap">
        <div class="sun"></div>
        <div class="moon"></div>
    </div>
    <script>
        var isSwitch = false; //开关的初始状态
        var span = document.querySelector('span');
        var body = document.querySelector('body');
        var btn = document.querySelector('.btn');
        var sun = document.querySelector('.sun');
        var moon = document.querySelector('.moon');

        function Hide_btn() {
            span.style.animation = "toleft 0.2s ease-in-out"
            span.style.opacity = 0
        }

        //鼠标移入
        function Show_btn() {
            span.style.animation = "toright 0.2s ease-in-out"
            span.style.opacity = 1

        }

        //开关控制
        function Super_switch() {
            isSwitch = !isSwitch;
            if (isSwitch == true) {
                span.style.backgroundColor = "white"
                span.innerHTML = "白"
                span.style.color = "black"
                span.style.boxShadow = "0px 0px 10px orange"
                body.style.backgroundColor = "wheat"
                moon.style.display = "none"
                sun.style.display = "block"
                sun.style.animation = "toTop 1s ease-in-out"
            } else {
                span.style.backgroundColor = "black"
                span.innerHTML = "夜"
                span.style.color = "white"
                span.style.boxShadow = "0px 0px 10px cyan"
                body.style.backgroundColor = "black"
                sun.style.display = "none"
                moon.style.display = "block"
                moon.style.animation = "toTop 1s ease-in-out"
            }
        }
    </script>
</body>

</html>