Create a single HTML file containing CSS and JavaS...

Question

Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

Answer 1

Here's a complete HTML file with embedded CSS and JavaScript that displays animated weather cards side by side for Wind, Rain, Sun, and Snow. It includes buttons to switch between weather conditions interactively:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Weather Cards</title>
    <style>
        body {
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
        }

        .weather-container {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 1000px;
        }

        .card {
            width: 220px;
            height: 280px;
            background-color: #333;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            margin: 10px;
        }

        .card h3 {
            text-align: center;
            margin-top: 10px;
        }

        /* WIND ANIMATION */
        .wind .cloud, .wind .wind-lines {
            position: absolute;
            animation: moveCloud 5s linear infinite;
        }

        .wind .cloud {
            top: 50px;
            left: -100px;
            width: 120px;
            height: 60px;
            background: #bbb;
            border-radius: 50px;
            opacity: 0.8;
        }

        .wind .wind-lines {
            top: 150px;
            left: -150px;
            width: 80px;
            height: 2px;
            background: #fff;
            opacity: 0.5;
        }

        @keyframes moveCloud {
            from { left: -150px; }
            to { left: 250px; }
        }

        /* RAIN ANIMATION */
        .rain .raindrop {
            position: absolute;
            bottom: 100%;
            width: 2px;
            height: 10px;
            background: #a4d2ff;
            animation: fallRain 1s linear infinite;
        }

        @keyframes fallRain {
            from { transform: translateY(0); opacity: 1; }
            to { transform: translateY(300px); opacity: 0; }
        }

        /* SUN ANIMATION */
        .sun .sun-core {
            position: absolute;
            top: 80px;
            left: 50%;
            width: 80px;
            height: 80px;
            background: #FFD700;
            border-radius: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 20px #FFD700;
        }

        .sun .ray {
            position: absolute;
            top: 120px;
            left: 50%;
            width: 2px;
            height: 40px;
            background: #FFD700;
            transform-origin: bottom center;
            animation: shine 3s linear infinite;
        }

        @keyframes shine {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }

        /* SNOW ANIMATION */
        .snow .snowflake {
            position: absolute;
            bottom: 100%;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            animation: fallSnow 3s linear infinite;
        }

        @keyframes fallSnow {
            from { transform: translateY(0); opacity: 1; }
            to { transform: translateY(300px); opacity: 0; }
        }

        /* Buttons */
        .controls {
            margin-top: 20px;
        }

        button {
            padding: 8px 15px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <h2>Animated Weather Cards</h2>
    <div class="weather-container">
        <div class="card wind" id="windCard">
            <h3>Wind</h3>
            <div class="cloud"></div>
            <div class="wind-lines" style="top: 180px;"></div>
            <div class="wind-lines" style="top: 210px; animation-delay: 2s;"></div>
        </div>

        <div class="card rain" id="rainCard">
            <h3>Rain</h3>
        </div>

        <div class="card sun" id="sunCard">
            <h3>Sun</h3>
            <div class="sun-core"></div>
        </div>

        <div class="card snow" id="snowCard">
            <h3>Snow</h3>
        </div>
    </div>

    <div class="controls">
        <button onclick="showCard('windCard')">Wind</button>
        <button onclick="showCard('rainCard')">Rain</button>
        <button onclick="showCard('sunCard')">Sun</button>
        <button onclick="showCard('snowCard')">Snow</button>
        <button onclick="showAll()">Show All</button>
    </div>

    <script>
        // Generate raindrops and snowflakes dynamically
        function createDrops(cardId, className, count) {
            const card = document.getElementById(cardId);
            for (let i = 0; i < count; i++) {
                const drop = document.createElement('div');
                drop.classList.add(className);
                drop.style.left = Math.random() * 100 + '%';
                drop.style.animationDelay = Math.random() * 2 + 's';
                drop.style.animationDuration = (Math.random() * 1.5 + 1) + 's';
                card.appendChild(drop);
            }
        }

        createDrops('rainCard', 'raindrop', 50);
        createDrops('snowCard', 'snowflake', 30);

        // Generate sun rays dynamically
        const sunCard = document.getElementById('sunCard');
        for (let i = 0; i < 12; i++) {
            const ray = document.createElement('div');
            ray.classList.add('ray');
            ray.style.transform = `translateX(-50%) rotate(${i * 30}deg)`;
            ray.style.animationDelay = (i * 0.2) + 's';
            sunCard.appendChild(ray);
        }

        // Card visibility controls
        function showCard(cardId) {
            document.querySelectorAll('.card').forEach(card => {
                card.style.display = card.id === cardId ? 'block' : 'none';
            });
        }

        function showAll() {
            document.querySelectorAll('.card').forEach(card => {
                card.style.display = 'block';
            });
        }

        // Start by showing all cards
        showAll();
    </script>
</body>
</html>

Explanation:

Wind: Clouds and horizontal wind lines move continuously from left to right.
Rain: Raindrops fall from the top to bottom with randomized positions and timings.
Sun: A glowing sun core with rays that fade in and out, creating a shining effect.
Snow: Snowflakes gently fall down with randomized positions and speeds.

You can interact with the buttons to display a single weather condition or all simultaneously.

Create a single HTML file containing CSS and JavaS...

Domanda

Risposta

Explanation:

Condividi questa Q&A