Claude Sonnet 3.7尝试,Coding 能力很强

总结能力如下:

image-20250226183107381
image-20250226183215084

image-20250226183235019

image-20250226183248369

最近很流行的天气卡片效果

提示词如下:
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.

几分钟就给出结果:

效果展示:

image-20250226182911937

代码如下:
<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background-color: #1a1a2e;
            color: white;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        h1 {
            margin-bottom: 30px;
            text-align: center;
        }
        
        .weather-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            width: 100%;
            max-width: 1200px;
        }
        
        .weather-card {
            width: 250px;
            height: 350px;
            background: linear-gradient(to bottom, #2d3748, #1a202c);
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
        }
        
        .weather-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        .weather-info {
            position: relative;
            z-index: 2;
        }
        
        .weather-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .weather-temp {
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            margin-top: auto;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        /* Sun Animation */
        .sun-card {
            background: linear-gradient(to bottom, #4a69bd, #1e3799);
        }
        
        .sun {
            position: absolute;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, #ffeb3b, #ff9800);
            border-radius: 50%;
            box-shadow: 0 0 40px #ff9800, 0 0 80px #ffeb3b;
            animation: pulse 3s infinite alternate;
        }
        
        .sun-ray {
            position: absolute;
            background: linear-gradient(to bottom, rgba(255, 235, 59, 0.8), rgba(255, 235, 59, 0));
            width: 4px;
            height: 60px;
            top: 50%;
            left: 50%;
            transform-origin: top;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 40px #ff9800, 0 0 60px #ffeb3b;
                transform: translateX(-50%) scale(1);
            }
            100% {
                box-shadow: 0 0 60px #ff9800, 0 0 100px #ffeb3b;
                transform: translateX(-50%) scale(1.1);
            }
        }
        
        /* Rain Animation */
        .rain-card {
            background: linear-gradient(to bottom, #2c3e50, #1e2a38);
        }
        
        .cloud {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 40px;
            background: #b3b3b3;
            border-radius: 40px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }
        
        .cloud::before, .cloud::after {
            content: '';
            position: absolute;
            background: #b3b3b3;
            border-radius: 50%;
        }
        
        .cloud::before {
            width: 60px;
            height: 60px;
            top: -30px;
            left: 15px;
        }
        
        .cloud::after {
            width: 50px;
            height: 50px;
            top: -25px;
            right: 15px;
        }
        
        .raindrop {
            position: absolute;
            width: 3px;
            height: 20px;
            background: linear-gradient(to bottom, rgba(174, 214, 241, 0.8), rgba(174, 214, 241, 0.2));
            border-radius: 0 0 5px 5px;
        }
        
        @keyframes rain {
            0% {
                transform: translateY(-20px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateY(250px);
                opacity: 0;
            }
        }
        
        /* Snow Animation */
        .snow-card {
            background: linear-gradient(to bottom, #34495e, #2c3e50);
        }
        
        .snowflake {
            position: absolute;
            color: white;
            opacity: 0.8;
            font-size: 20px;
        }
        
        @keyframes snowfall {
            0% {
                transform: translateY(-20px) rotate(0deg);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: translateY(300px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* Wind Animation */
        .wind-card {
            background: linear-gradient(to bottom, #5d6d7e, #34495e);
        }
        
        .wind-cloud {
            position: absolute;
            background: #b3b3b3;
            border-radius: 40px;
            height: 25px;
        }
        
        .wind-line {
            position: absolute;
            height: 3px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 3px;
        }
        
        @keyframes wind-cloud {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateX(300px);
                opacity: 0;
            }
        }
        
        @keyframes wind-line {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateX(300px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <h1>Weather Animations</h1>
    
    <div class="weather-container">
        <!-- Sun Card -->
        <div class="weather-card sun-card">
            <div class="weather-info">
                <div class="weather-title">Sunny</div>
            </div>
            <div class="weather-animation" id="sun-animation"></div>
            <div class="weather-temp">28°C</div>
        </div>
        
        <!-- Rain Card -->
        <div class="weather-card rain-card">
            <div class="weather-info">
                <div class="weather-title">Rainy</div>
            </div>
            <div class="weather-animation" id="rain-animation">
                <div class="cloud"></div>
            </div>
            <div class="weather-temp">18°C</div>
        </div>
        
        <!-- Snow Card -->
        <div class="weather-card snow-card">
            <div class="weather-info">
                <div class="weather-title">Snowy</div>
            </div>
            <div class="weather-animation" id="snow-animation">
                <div class="cloud"></div>
            </div>
            <div class="weather-temp">-5°C</div>
        </div>
        
        <!-- Wind Card -->
        <div class="weather-card wind-card">
            <div class="weather-info">
                <div class="weather-title">Windy</div>
            </div>
            <div class="weather-animation" id="wind-animation"></div>
            <div class="weather-temp">22°C</div>
        </div>
    </div>

    <script>
        // Sun Animation
        function createSunAnimation() {
            const sunAnimation = document.getElementById('sun-animation');
            sunAnimation.innerHTML = '';
            
            // Create sun
            const sun = document.createElement('div');
            sun.className = 'sun';
            sunAnimation.appendChild(sun);
            
            // Create sun rays
            for (let i = 0; i < 12; i++) {
                const ray = document.createElement('div');
                ray.className = 'sun-ray';
                ray.style.transform = `translate(-50%, 0) rotate(${i * 30}deg)`;
                ray.style.animation = `pulse 3s infinite alternate ${i * 0.2}s`;
                sun.appendChild(ray);
            }
        }
        
        // Rain Animation
        function createRainAnimation() {
            const rainAnimation = document.getElementById('rain-animation');
            const existingCloud = rainAnimation.querySelector('.cloud');
            
            // Remove old raindrops but keep the cloud
            rainAnimation.querySelectorAll('.raindrop').forEach(drop => drop.remove());
            
            // Create raindrops
            for (let i = 0; i < 20; i++) {
                const drop = document.createElement('div');
                drop.className = 'raindrop';
                
                // Random position
                const left = Math.random() * 200 + 25;
                
                // Random animation duration
                const duration = Math.random() * 1 + 1;
                
                // Random delay
                const delay = Math.random() * 2;
                
                drop.style.left = `${left}px`;
                drop.style.animation = `rain ${duration}s linear infinite ${delay}s`;
                
                rainAnimation.appendChild(drop);
            }
        }
        
        // Snow Animation
        function createSnowAnimation() {
            const snowAnimation = document.getElementById('snow-animation');
            
            // Remove old snowflakes but keep the cloud
            snowAnimation.querySelectorAll('.snowflake').forEach(flake => flake.remove());
            
            // Add cloud if it doesn't exist
            if (!snowAnimation.querySelector('.cloud')) {
                const cloud = document.createElement('div');
                cloud.className = 'cloud';
                snowAnimation.appendChild(cloud);
            }
            
            // Create snowflakes
            for (let i = 0; i < 30; i++) {
                const flake = document.createElement('div');
                flake.className = 'snowflake';
                flake.innerHTML = '❄';
                
                // Random position
                const left = Math.random() * 200 + 25;
                
                // Random size
                const size = Math.random() * 10 + 10;
                
                // Random animation duration
                const duration = Math.random() * 3 + 3;
                
                // Random delay
                const delay = Math.random() * 3;
                
                flake.style.left = `${left}px`;
                flake.style.fontSize = `${size}px`;
                flake.style.animation = `snowfall ${duration}s linear infinite ${delay}s`;
                flake.style.opacity = Math.random() * 0.5 + 0.5;
                
                snowAnimation.appendChild(flake);
            }
        }
        
        // Wind Animation
        function createWindAnimation() {
            const windAnimation = document.getElementById('wind-animation');
            windAnimation.innerHTML = '';
            
            // Create floating clouds
            for (let i = 0; i < 3; i++) {
                const cloud = document.createElement('div');
                cloud.className = 'wind-cloud';
                
                // Random position
                const top = 40 + i * 60;
                const width = Math.random() * 50 + 70;
                
                // Random animation duration
                const duration = Math.random() * 5 + 7;
                
                // Random delay
                const delay = Math.random() * 5;
                
                cloud.style.top = `${top}px`;
                cloud.style.width = `${width}px`;
                cloud.style.animation = `wind-cloud ${duration}s linear infinite ${delay}s`;
                
                windAnimation.appendChild(cloud);
                
                // Add cloud bubbles
                const bubble1 = document.createElement('div');
                bubble1.style.position = 'absolute';
                bubble1.style.width = `${width * 0.4}px`;
                bubble1.style.height = `${width * 0.4}px`;
                bubble1.style.background = '#b3b3b3';
                bubble1.style.borderRadius = '50%';
                bubble1.style.top = `-${width * 0.2}px`;
                bubble1.style.left = `${width * 0.1}px`;
                
                const bubble2 = document.createElement('div');
                bubble2.style.position = 'absolute';
                bubble2.style.width = `${width * 0.3}px`;
                bubble2.style.height = `${width * 0.3}px`;
                bubble2.style.background = '#b3b3b3';
                bubble2.style.borderRadius = '50%';
                bubble2.style.top = `-${width * 0.15}px`;
                bubble2.style.right = `${width * 0.2}px`;
                
                cloud.appendChild(bubble1);
                cloud.appendChild(bubble2);
            }
            
            // Create wind lines
            for (let i = 0; i < 15; i++) {
                const line = document.createElement('div');
                line.className = 'wind-line';
                
                // Random position
                const top = Math.random() * 250 + 50;
                const width = Math.random() * 60 + 30;
                
                // Random animation duration
                const duration = Math.random() * 2 + 1;
                
                // Random delay
                const delay = Math.random() * 3;
                
                line.style.top = `${top}px`;
                line.style.width = `${width}px`;
                line.style.animation = `wind-line ${duration}s linear infinite ${delay}s`;
                
                windAnimation.appendChild(line);
            }
        }
        
        // Initialize all animations
        function initAnimations() {
            createSunAnimation();
            createRainAnimation();
            createSnowAnimation();
            createWindAnimation();
        }
        
        // Start animations on page load
        window.addEventListener('load', initAnimations);
    </script>
</body>
</html>
最后修改:2025 年 02 月 26 日
如果觉得我的文章对你有用,请随意赞赏