Sun and Moon animation using html css and javascript-JS Tutorial-php.cn

Sun and Moon animation using html css and javascript

DDD

Release： 2024-10-30 01:51:28

Original

207 people have browsed it

Sun and Moon animation using html css and javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day-Night Toggle</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMcB8pE7ZbShUgKxY9R+uaZkZ5kXy/tO6zzD2dn" crossorigin="anonymous">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            transition: background 0.8s ease, filter 0.8s ease;
            overflow: hidden;
        }

        .container {
            position: absolute;
            bottom: 30px;
            right: 30px;
            text-align: center;
        }

        .toggle-button {
            width: 100px;
            height: 50px;
            background: #333;
            border-radius: 25px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
        }

        .toggle-circle {
            width: 40px;
            height: 40px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            transition: all 0.5s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* Icons for Sun and Moon on Button */
        .button-sun, .button-moon {
            font-size: 2rem;
        }
        .button-sun {
            color: #FFD700;
        }
        .button-moon {
            color: #B0C4DE;
        }

        /* Large Sun and Moon at Top Left */
        .large-sun, .large-moon {
            font-size: 10rem;
            position: absolute;
            top: 20px;
            right: 10px;
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .large-sun {
            color: #FFD700;
            opacity: 0;
        }
        .large-moon {
            color: #B0C4DE;
            opacity: 0;
        }

        /* Day and Night styles */
        .day .large-sun {
            opacity: 1;
            transform: translateY(0);
        }

        .night .large-moon {
            opacity: 1;
            transform: translateY(0);
        }

        .day .image {
            filter: brightness(1.5) contrast(1.2) saturate(2);
        }

        .night .image {
            filter: brightness(0.7) contrast(1) saturate(1);
        }

        .image {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .moon-image {
            height: 200px;
            width: 200px;
            filter: drop-shadow(1px 1px 20px white);
        }
        .sun-image {
            height: 250px;
            width: 300px;
            filter: drop-shadow(2px 2px 40px rgb(206, 145, 23));
        }

        /* New styles for text */
        .mode-text {
            position: absolute;
            top: 40%;
            left: 40%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
            transition: opacity 0.5s ease;
        }
        .day .mode-text {
            opacity: 1;
        }
        .night .mode-text {
            opacity: 0;
        }
        .night .mode-text-night {
            opacity: 1;
        }
    </style>
</head>
<body class="day">
    <img src="./city.jpg" class="image" alt="">

    <div class="large-moon">
        <img src="./moon2.gif" class="moon-image" alt="">
    </div>
    <div class="large-sun">
        <img src="./sun.gif" class="sun-image" alt="">
    </div>

    <div class="mode-text day-text">Good Morning! It's a beautiful day!</div>
    <div class="mode-text night-text night" style="opacity: 0;">Good Night! Sweet dreams!</div>

    <div class="container">
        <div class="toggle-button" onclick="toggleDayNight()">
            <div class="button-sun">&#x2600;</div>
            <div class="button-moon">&#x1F319;</div>
            <div class="toggle-circle"></div>
        </div>
    </div>

    <script>
        let isDay = true;

        function toggleDayNight() {
            const body = document.body;
            const toggleCircle = document.querySelector('.toggle-circle');
            const largeSun = document.querySelector('.large-sun');
            const largeMoon = document.querySelector('.large-moon');
            const dayText = document.querySelector('.day-text');
            const nightText = document.querySelector('.night-text');

            if (isDay) {
                // Switch to night mode
                body.classList.remove('day');
                body.classList.add('night');
                toggleCircle.style.transform = 'translateX(60px)';
                dayText.style.opacity = '0';
                nightText.style.opacity = '1';
            } else {
                // Switch to day mode
                body.classList.remove('night');
                body.classList.add('day');
                toggleCircle.style.transform = 'translateX(0)';
                dayText.style.opacity = '1';
                nightText.style.opacity = '0';
            }

            isDay = !isDay;
        }
    </script>
</body>
</html>

Copy after login

The above is the detailed content of Sun and Moon animation using html css and javascript. For more information, please follow other related articles on the PHP Chinese website!