1_动画天气卡片

原创已于 2025-03-12 00:04:52 修改 · 793 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

纯前端开发

于 2025-03-12 00:00:03 首次发布

在这里插入图片描述
提示词

提示：创建一个包含 CSS 和 JavaScript 的 HTML 文件，以生成动画天气卡。卡片应以不同的动画直观地表示以下天气状况： 风：（例如，移动的云、摇曳的树木或风线） 雨：（例如，落下的雨滴、形成的水坑） 太阳：（例如，闪亮的光线、明亮的背景） 雪：（例如，飘落的雪花、积雪） 并排显示所有天气卡片 卡片应具有深色背景。在此文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包括一种在不同天气条件之间切换的方法（例如，一个函数或一组按钮），以演示每种天气条件的动画。

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画天气卡片</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 1200px;
            margin-top: 20px;
        }

        .card {
            width: 240px;
            height: 320px;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            background-color: #2c3e50;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .card-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 20px;
            color: white;
            z-index: 10;
            text-align: center;
        }

        .card-title {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .temperature {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .date {
            font-size: 14px;
            opacity: 0.8;
        }

        /* 太阳动画 */
        .sun-card {
            background: linear-gradient(to top, #2c3e50, #4a69bd);
        }

        .sun {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            background: #ffeb3b;
            border-radius: 50%;
            box-shadow: 0 0 40px #ff9800, 0 0 60px #ff9800, 0 0 80px #ffeb3b;
            animation: pulse 3s infinite;
        }

        .sun-ray {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140px;
            height: 140px;
        }

        .ray {
            position: absolute;
            width: 3px;
            height: 80px;
            background: rgba(255, 235, 59, 0.7);
            transform-origin: bottom center;
            top: -30px;
            left: 68.5px;
            animation: rotate 20s linear infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 40px #ff9800, 0 0 60px #ff9800, 0 0 80px #ffeb3b; }
            50% { box-shadow: 0 0 50px #ff9800, 0 0 70px #ff9800, 0 0 90px #ffeb3b; }
        }

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

        /* 雨动画 */
        .rain-card {
            background: linear-gradient(to top, #2c3e50, #3c6382);
        }

        .cloud {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 50px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
        }

        .cloud:before, .cloud:after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
        }

        .cloud:before {
            width: 50px;
            height: 50px;
            top: -25px;
            left: 15px;
        }

        .cloud:after {
            width: 70px;
            height: 70px;
            top: -35px;
            right: 15px;
        }

        .raindrop {
            position: absolute;
            width: 3px;
            height: 20px;
            background: linear-gradient(to bottom, rgba(174, 214, 241, 0.8), rgba(30, 139, 195, 0.8));
            border-radius: 0 0 10px 10px;
            opacity: 0.8;
            animation: falling 1.5s infinite linear;
        }

        @keyframes falling {
            0% { transform: translateY(-10px); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(160px); opacity: 0; }
        }

        /* 雪动画 */
        .snow-card {
            background: linear-gradient(to top, #2c3e50, #34495e);
        }

        .snowflake {
            position: absolute;
            color: #fff;
            font-size: 20px;
            opacity: 0.8;
            animation: falling-snow 8s infinite linear;
        }

        @keyframes falling-snow {
            0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(350px) rotate(360deg); opacity: 0; }
        }

        /* 风动画 */
        .wind-card {
            background: linear-gradient(to top, #2c3e50, #7f8c8d);
        }

        .wind-line {
            position: absolute;
            height: 2px;
            background: rgba(255, 255, 255, 0.6);
            animation: wind 3s infinite linear;
        }

        @keyframes wind {
            0% { transform: translateX(-30px); opacity: 0; }
            50% { opacity: 0.8; }
            100% { transform: translateX(270px); opacity: 0; }
        }

        /* 控制按钮 */
        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #3498db;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        button.active {
            background-color: #16a085;
        }
    </style>
</head>
<body>
    <h1>动画天气卡片</h1>
    
    <div class="controls">
        <button id="show-all" class="active">显示所有</button>
        <button id="show-sun">太阳</button>
        <button id="show-rain">雨</button>
        <button id="show-snow">雪</button>
        <button id="show-wind">风</button>
    </div>
    
    <div class="container">
        <!-- 太阳卡片 -->
        <div class="card sun-card" id="sun-weather">
            <div class="sun"></div>
            <div class="sun-ray" id="sun-rays"></div>
            <div class="card-content">
                <div class="card-title">晴天</div>
                <div class="temperature">28°C</div>
                <div class="date">2月25日</div>
            </div>
        </div>
        
        <!-- 雨卡片 -->
        <div class="card rain-card" id="rain-weather">
            <div class="cloud"></div>
            <div id="raindrops"></div>
            <div class="card-content">
                <div class="card-title">雨天</div>
                <div class="temperature">15°C</div>
                <div class="date">2月25日</div>
            </div>
        </div>
        
        <!-- 雪卡片 -->
        <div class="card snow-card" id="snow-weather">
            <div class="cloud"></div>
            <div id="snowflakes"></div>
            <div class="card-content">
                <div class="card-title">雪天</div>
                <div class="temperature">-3°C</div>
                <div class="date">2月25日</div>
            </div>
        </div>
        
        <!-- 风卡片 -->
        <div class="card wind-card" id="wind-weather">
            <div id="wind-lines"></div>
            <div class="card-content">
                <div class="card-title">多风</div>
                <div class="temperature">22°C</div>
                <div class="date">2月25日</div>
            </div>
        </div>
    </div>

    <script>
        // 创建太阳光线
        function createSunRays() {
            const sunRays = document.getElementById('sun-rays');
            sunRays.innerHTML = '';
            
            for (let i = 0; i < 12; i++) {
                const ray = document.createElement('div');
                ray.className = 'ray';
                ray.style.transform = `rotate(${i * 30}deg)`;
                sunRays.appendChild(ray);
            }
        }
        
        // 创建雨滴
        function createRaindrops() {
            const raindrops = document.getElementById('raindrops');
            raindrops.innerHTML = '';
            
            for (let i = 0; i < 20; i++) {
                const raindrop = document.createElement('div');
                raindrop.className = 'raindrop';
                raindrop.style.left = `${Math.random() * 220 + 10}px`;
                raindrop.style.animationDelay = `${Math.random() * 1.5}s`;
                raindrops.appendChild(raindrop);
            }
        }
        
        // 创建雪花
        function createSnowflakes() {
            const snowflakes = document.getElementById('snowflakes');
            snowflakes.innerHTML = '';
            
            const snowflakeChars = ['❄', '❅', '❆', '✻', '✼'];
            
            for (let i = 0; i < 20; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.textContent = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];
                snowflake.style.left = `${Math.random() * 200 + 20}px`;
                snowflake.style.animationDuration = `${Math.random() * 5 + 5}s`;
                snowflake.style.animationDelay = `${Math.random() * 3}s`;
                snowflakes.appendChild(snowflake);
            }
        }
        
        // 创建风线
        function createWindLines() {
            const windLines = document.getElementById('wind-lines');
            windLines.innerHTML = '';
            
            for (let i = 0; i < 8; i++) {
                const windLine = document.createElement('div');
                windLine.className = 'wind-line';
                windLine.style.top = `${30 + i * 30}px`;
                windLine.style.width = `${Math.random() * 50 + 50}px`;
                windLine.style.animationDuration = `${Math.random() * 2 + 2}s`;
                windLine.style.animationDelay = `${Math.random() * 2}s`;
                windLines.appendChild(windLine);
            }
        }
        
        // 初始化所有天气动画
        function initWeatherAnimations() {
            createSunRays();
            createRaindrops();
            createSnowflakes();
            createWindLines();
        }
        
        // 切换显示模式
        function setupDisplayControls() {
            const buttons = document.querySelectorAll('.controls button');
            const cards = document.querySelectorAll('.card');
            
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有活跃状态
                    buttons.forEach(btn => btn.classList.remove('active'));
                    
                    // 添加当前按钮的活跃状态
                    this.classList.add('active');
                    
                    // 隐藏所有卡片
                    cards.forEach(card => card.style.display = 'none');
                    
                    // 根据按钮 ID 显示对应的卡片
                    if (this.id === 'show-all') {
                        cards.forEach(card => card.style.display = 'block');
                    } else if (this.id === 'show-sun') {
                        document.getElementById('sun-weather').style.display = 'block';
                    } else if (this.id === 'show-rain') {
                        document.getElementById('rain-weather').style.display = 'block';
                    } else if (this.id === 'show-snow') {
                        document.getElementById('snow-weather').style.display = 'block';
                    } else if (this.id === 'show-wind') {
                        document.getElementById('wind-weather').style.display = 'block';
                    }
                });
            });
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initWeatherAnimations();
            setupDisplayControls();
        };
    </script>
</body>
</html>

标签

#css #css3 #javascript