蔚蓝技术舱 - 详情

提供如下内容给ai：

你是一位就职于苹果公司的顶级前端工程师。请创建一个包含 CSS 和 JavaScript 的 HTML 文件，用于生成动画天气卡片。
卡片需要以不同动画效果直观展示以下天气状况：
风力（如：飘动的云朵、摇曳的树木或风线）
降雨（如：下落的雨滴、形成的水洼）
晴天（如：闪耀的光线、明亮的背景）
下雪（如：飘落的雪花、积雪效果）
所有天气卡片需要并排显示，背景采用深色设计。
所有 HTML、CSS 和 JavaScript 代码都需包含在这个单一文件中。
JavaScript 部分需包含切换不同天气状态的功能（例如通过函数或按钮组），以演示每种天气的动画效果。
将前端显示效果优化得更精致流畅，打造出价值 2000 元 / 月的精品天气应用既视感。

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.

得到的效果：

代码如下：

<!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 {
            font-family: 'Arial', sans-serif;
            background-color: #1a1a2e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            color: white;
        }

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

        .weather-card {
            position: relative;
            width: 250px;
            height: 350px;
            background: linear-gradient(to bottom, #2a2a4a, #16162c);
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .weather-card:hover {
            transform: translateY(-10px);
        }

        .card-content {
            position: relative;
            z-index: 2;
            padding: 20px;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .weather-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            color: #ffffff;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .weather-temp {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .weather-details {
            margin-top: auto;
            text-align: center;
            font-size: 14px;
            color: #cccccc;
        }

        /* Wind Animation */
        .wind-card .animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            animation: windCloud linear infinite;
        }

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

        @keyframes windCloud {
            0% {
                transform: translateX(-100px);
            }
            100% {
                transform: translateX(350px);
            }
        }

        @keyframes windLine {
            0% {
                transform: translateX(-50px) scaleX(0);
                opacity: 0;
            }
            20% {
                transform: translateX(0) scaleX(1);
                opacity: 1;
            }
            80% {
                transform: translateX(200px) scaleX(1);
                opacity: 1;
            }
            100% {
                transform: translateX(250px) scaleX(0);
                opacity: 0;
            }
        }

        /* Rain Animation */
        .rain-card .animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .raindrop {
            position: absolute;
            width: 2px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
            animation: rain linear infinite;
        }

        .puddle {
            position: absolute;
            bottom: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: scaleX(2) scaleY(0.5);
            animation: puddle 3s ease-in-out infinite;
        }

        @keyframes rain {
            0% {
                transform: translateY(-100px);
            }
            100% {
                transform: translateY(400px);
            }
        }

        @keyframes puddle {
            0%, 100% {
                transform: scaleX(2) scaleY(0.5);
                opacity: 0.2;
            }
            50% {
                transform: scaleX(2.2) scaleY(0.55);
                opacity: 0.3;
            }
        }

        /* Sun Animation */
        .sun-card .animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(to bottom, #ff9966, #2a2a4a);
        }

        .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            background: #ffdd00;
            border-radius: 50%;
            box-shadow: 0 0 50px #ffdd00;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            animation: sunPulse 3s ease-in-out infinite;
        }

        .sun-ray {
            position: absolute;
            background: linear-gradient(to bottom, rgba(255, 221, 0, 0.7), rgba(255, 221, 0, 0));
            transform-origin: top;
            animation: sunRay 3s ease-in-out infinite;
        }

        @keyframes sunPulse {
            0%, 100% {
                box-shadow: 0 0 50px #ffdd00;
                transform: translateX(-50%) scale(1);
            }
            50% {
                box-shadow: 0 0 70px #ffdd00;
                transform: translateX(-50%) scale(1.05);
            }
        }

        @keyframes sunRay {
            0%, 100% {
                opacity: 0.5;
                transform: scaleY(1);
            }
            50% {
                opacity: 0.7;
                transform: scaleY(1.1);
            }
        }

        /* Snow Animation */
        .snow-card .animation-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(to bottom, #2a2a4a, #16162c);
        }

        .snowflake {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            animation: snow linear infinite;
        }

        .snow-ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            transform: scaleX(1.2);
        }

        @keyframes snow {
            0% {
                transform: translateY(-50px) rotate(0deg);
            }
            100% {
                transform: translateY(400px) rotate(360deg);
            }
        }

        /* Controls */
        .controls {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Wind Card -->
        <div class="weather-card wind-card">
            <div class="animation-container" id="wind-animation">
                <!-- Wind animations will be added here by JS -->
            </div>
            <div class="card-content">
                <div class="weather-title">Windy</div>
                <div class="weather-temp">18°C</div>
                <div class="weather-details">
                    <p>Wind: 25 km/h</p>
                    <p>Humidity: 45%</p>
                    <p>Pressure: 1012 hPa</p>
                </div>
            </div>
        </div>

        <!-- Rain Card -->
        <div class="weather-card rain-card">
            <div class="animation-container" id="rain-animation">
                <!-- Rain animations will be added here by JS -->
            </div>
            <div class="card-content">
                <div class="weather-title">Rainy</div>
                <div class="weather-temp">14°C</div>
                <div class="weather-details">
                    <p>Precipitation: 80%</p>
                    <p>Humidity: 85%</p>
                    <p>Pressure: 1008 hPa</p>
                </div>
            </div>
        </div>

        <!-- Sun Card -->
        <div class="weather-card sun-card">
            <div class="animation-container" id="sun-animation">
                <!-- Sun animations will be added here by JS -->
            </div>
            <div class="card-content">
                <div class="weather-title">Sunny</div>
                <div class="weather-temp">28°C</div>
                <div class="weather-details">
                    <p>UV Index: High</p>
                    <p>Humidity: 30%</p>
                    <p>Pressure: 1015 hPa</p>
                </div>
            </div>
        </div>

        <!-- Snow Card -->
        <div class="weather-card snow-card">
            <div class="animation-container" id="snow-animation">
                <!-- Snow animations will be added here by JS -->
            </div>
            <div class="card-content">
                <div class="weather-title">Snowy</div>
                <div class="weather-temp">-5°C</div>
                <div class="weather-details">
                    <p>Snowfall: 5 cm</p>
                    <p>Humidity: 70%</p>
                    <p>Pressure: 1020 hPa</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Wind Animation
        function createWindAnimation() {
            const container = document.getElementById('wind-animation');
            container.innerHTML = '';
            
            // Create clouds
            for (let i = 0; i < 5; i++) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                
                const size = Math.random() * 50 + 30;
                const top = Math.random() * 300;
                const opacity = Math.random() * 0.5 + 0.2;
                const duration = Math.random() * 10 + 15;
                const delay = Math.random() * 5;
                
                cloud.style.width = `${size}px`;
                cloud.style.height = `${size / 2}px`;
                cloud.style.top = `${top}px`;
                cloud.style.opacity = opacity;
                cloud.style.animationDuration = `${duration}s`;
                cloud.style.animationDelay = `${delay}s`;
                
                container.appendChild(cloud);
            }
            
            // Create wind lines
            for (let i = 0; i < 15; i++) {
                const windLine = document.createElement('div');
                windLine.className = 'wind-line';
                
                const width = Math.random() * 50 + 30;
                const top = Math.random() * 350;
                const duration = Math.random() * 2 + 1;
                const delay = Math.random() * 3;
                
                windLine.style.width = `${width}px`;
                windLine.style.top = `${top}px`;
                windLine.style.animationDuration = `${duration}s`;
                windLine.style.animationDelay = `${delay}s`;
                
                container.appendChild(windLine);
            }
        }

        // Rain Animation
        function createRainAnimation() {
            const container = document.getElementById('rain-animation');
            container.innerHTML = '';
            
            // Create raindrops
            for (let i = 0; i < 80; i++) {
                const raindrop = document.createElement('div');
                raindrop.className = 'raindrop';
                
                const height = Math.random() * 20 + 10;
                const left = Math.random() * 250;
                const duration = Math.random() * 1 + 0.5;
                const delay = Math.random() * 2;
                const opacity = Math.random() * 0.7 + 0.3;
                
                raindrop.style.height = `${height}px`;
                raindrop.style.left = `${left}px`;
                raindrop.style.opacity = opacity;
                raindrop.style.animationDuration = `${duration}s`;
                raindrop.style.animationDelay = `${delay}s`;
                
                container.appendChild(raindrop);
            }
            
            // Create puddles
            for (let i = 0; i < 5; i++) {
                const puddle = document.createElement('div');
                puddle.className = 'puddle';
                
                const size = Math.random() * 30 + 20;
                const left = Math.random() * 200 + 25;
                const delay = Math.random() * 2;
                
                puddle.style.width = `${size}px`;
                puddle.style.height = `${size / 4}px`;
                puddle.style.left = `${left}px`;
                puddle.style.animationDelay = `${delay}s`;
                
                container.appendChild(puddle);
            }
        }

        // Sun Animation
        function createSunAnimation() {
            const container = document.getElementById('sun-animation');
            container.innerHTML = '';
            
            // Create sun
            const sun = document.createElement('div');
            sun.className = 'sun';
            container.appendChild(sun);
            
            // Create sun rays
            for (let i = 0; i < 8; i++) {
                const ray = document.createElement('div');
                ray.className = 'sun-ray';
                
                const angle = (i * 45) * (Math.PI / 180);
                const length = 100;
                const width = 10;
                
                ray.style.width = `${width}px`;
                ray.style.height = `${length}px`;
                ray.style.top = `${90}px`;
                ray.style.left = `${125 - (width / 2)}px`;
                ray.style.transform = `rotate(${i * 45}deg) translateY(-${length / 2}px)`;
                ray.style.transformOrigin = `${width / 2}px ${length}px`;
                ray.style.animationDelay = `${i * 0.2}s`;
                
                container.appendChild(ray);
            }
        }

        // Snow Animation
        function createSnowAnimation() {
            const container = document.getElementById('snow-animation');
            container.innerHTML = '';
            
            // Create snowflakes
            for (let i = 0; i < 60; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                
                const size = Math.random() * 5 + 2;
                const left = Math.random() * 250;
                const duration = Math.random() * 10 + 5;
                const delay = Math.random() * 5;
                
                snowflake.style.width = `${size}px`;
                snowflake.style.height = `${size}px`;
                snowflake.style.left = `${left}px`;
                snowflake.style.animationDuration = `${duration}s`;
                snowflake.style.animationDelay = `${delay}s`;
                
                container.appendChild(snowflake);
            }
            
            // Create snow ground
            const ground = document.createElement('div');
            ground.className = 'snow-ground';
            container.appendChild(ground);
        }

        // Initialize all animations
        function initAnimations() {
            createWindAnimation();
            createRainAnimation();
            createSunAnimation();
            createSnowAnimation();
        }

        // Start animations when page loads
        window.onload = initAnimations;
    </script>
</body>
</html>

Claude 3.7 sonnet 编程 - 生成动画天气卡片