程序员可能要失业了，有感于deepseek用单个html文件完成动画

在知乎看到说deepseek有更新，然后里面有个测试内容，照搬过来试了试，关键词如下：

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

 

然后就真的生成了一个单html文件，然后我点击下面的运行按钮，运行了起来，效果惊艳。

<!DOCTYPE html>
<html lang="en">
<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: #121212;
            color: #fff;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            margin-bottom: 30px;
            text-align: center;
        }

        .weather-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            width: 100%;
            max-width: 1200px;
        }

        .weather-card {
            width: 250px;
            height: 350px;
            background-color: #1e1e1e;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .weather-title {
            font-size: 24px;
            margin-bottom: 15px;
            text-align: center;
            z-index: 2;
            position: relative;
        }

        .controls {
            margin-bottom: 30px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #555;
        }

        button.active {
            background-color: #0078d7;
        }

        /* 风动画 */
        .wind .cloud {
            position: absolute;
            background-color: #555;
            border-radius: 50%;
            opacity: 0.8;
        }

        .wind .cloud1 {
            width: 60px;
            height: 30px;
            top: 80px;
            left: -70px;
            animation: cloudMove 8s linear infinite;
        }

        .wind .cloud2 {
            width: 80px;
            height: 40px;
            top: 120px;
            left: -90px;
            animation: cloudMove 10s linear infinite 2s;
        }

        .wind .tree {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
        }

        .wind .trunk {
            width: 15px;
            height: 80px;
            background-color: #5e2c04;
            margin: 0 auto;
        }

        .wind .leaves {
            width: 80px;
            height: 80px;
            background-color: #2a5c03;
            border-radius: 50%;
            position: relative;
            bottom: 20px;
            transform-origin: bottom center;
            animation: sway 3s ease-in-out infinite alternate;
        }

        .wind .wind-line {
            position: absolute;
            height: 2px;
            background-color: rgba(255, 255, 255, 0.5);
            transform-origin: left center;
            animation: windFlow 4s linear infinite;
        }

        /* 雨动画 */
        .rain .raindrop {
            position: absolute;
            width: 2px;
            background-color: rgba(174, 194, 224, 0.8);
            animation: rainFall linear infinite;
        }

        .rain .puddle {
            position: absolute;
            bottom: 30px;
            border-radius: 50%;
            background-color: rgba(100, 149, 237, 0.4);
            opacity: 0;
            animation: puddleForm 1s ease-out infinite;
        }

        /* 晴动画 */
        .sunny {
            background: linear-gradient(to bottom, #1e3c72, #2a5298);
        }

        .sunny .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            background-color: #ffdb58;
            border-radius: 50%;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 40px 15px #ffdb58;
        }

        .sunny .sun-ray {
            position: absolute;
            background-color: rgba(255, 219, 88, 0.6);
            animation: sunShine 4s ease-in-out infinite;
        }

        /* 雪动画 */
        .snow .snowflake {
            position: absolute;
            color: white;
            font-size: 14px;
            animation: snowFall linear infinite;
            opacity: 0.8;
        }

        .snow .snow-accumulation {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 0;
            background-color: white;
            opacity: 0.8;
            animation: snowAccumulate 10s linear infinite;
        }

        /* 动画定义 */
        @keyframes cloudMove {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(350px); }
        }

        @keyframes sway {
            0% { transform: rotate(-15deg); }
            100% { transform: rotate(15deg); }
        }

        @keyframes windFlow {
            0% { 
                transform: translateX(0) scaleX(0);
                opacity: 0;
            }
            10% { opacity: 0.5; }
            70% { opacity: 0.5; }
            100% { 
                transform: translateX(200px) scaleX(2);
                opacity: 0;
            }
        }

        @keyframes rainFall {
            0% { 
                transform: translateY(-10px); 
                height: 10px;
            }
            70% { height: 15px; }
            100% { 
                transform: translateY(250px); 
                height: 5px;
            }
        }

        @keyframes puddleForm {
            0% { 
                transform: scale(0); 
                opacity: 0.5;
            }
            100% { 
                transform: scale(2); 
                opacity: 0;
            }
        }

        @keyframes sunShine {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }

        @keyframes snowFall {
            0% { 
                transform: translateY(-10px) rotate(0deg); 
                opacity: 0;
            }
            10% { opacity: 0.8; }
            90% { opacity: 0.8; }
            100% { 
                transform: translateY(250px) rotate(360deg); 
                opacity: 0;
            }
        }

        @keyframes snowAccumulate {
            0% { height: 0; }
            100% { height: 30px; }
        }
    </style>
</head>
<body>
    <h1>动画天气卡片</h1>
    
    <div class="controls">
        <button onclick="showAllWeather()" class="active">显示全部</button>
        <button onclick="showWeather('wind')">风</button>
        <button onclick="showWeather('rain')">雨</button>
        <button onclick="showWeather('sunny')">晴</button>
        <button onclick="showWeather('snow')">雪</button>
    </div>
    
    <div class="weather-container">
        <div class="weather-card wind" id="wind-card">
            <h2 class="weather-title">风</h2>
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
            <div class="tree">
                <div class="trunk"></div>
                <div class="leaves"></div>
            </div>
        </div>
        
        <div class="weather-card rain" id="rain-card">
            <h2 class="weather-title">雨</h2>
        </div>
        
        <div class="weather-card sunny" id="sunny-card">
            <h2 class="weather-title">晴</h2>
            <div class="sun"></div>
        </div>
        
        <div class="weather-card snow" id="snow-card">
            <h2 class="weather-title">雪</h2>
            <div class="snow-accumulation"></div>
        </div>
    </div>

    <script>
        // 初始化天气元素
        function initWeatherElements() {
            // 创建风的线条
            const windCard = document.getElementById('wind-card');
            for (let i = 0; i < 8; i++) {
                const windLine = document.createElement('div');
                windLine.className = 'wind-line';
                windLine.style.top = `${50 + Math.random() * 150}px`;
                windLine.style.left = `${Math.random() * 200}px`;
                windLine.style.width = `${30 + Math.random() * 50}px`;
                windLine.style.animationDelay = `${Math.random() * 4}s`;
                windCard.appendChild(windLine);
            }
            
            // 创建雨滴和水坑
            const rainCard = document.getElementById('rain-card');
            for (let i = 0; i < 30; i++) {
                const raindrop = document.createElement('div');
                raindrop.className = 'raindrop';
                raindrop.style.left = `${Math.random() * 230}px`;
                raindrop.style.animationDuration = `${0.5 + Math.random() * 1.5}s`;
                raindrop.style.animationDelay = `${Math.random() * 2}s`;
                rainCard.appendChild(raindrop);
                
                if (i % 5 === 0) {
                    const puddle = document.createElement('div');
                    puddle.className = 'puddle';
                    puddle.style.left = `${20 + Math.random() * 190}px`;
                    puddle.style.width = `${20 + Math.random() * 30}px`;
                    puddle.style.height = `${10 + Math.random() * 10}px`;
                    puddle.style.animationDelay = `${Math.random() * 5}s`;
                    rainCard.appendChild(puddle);
                }
            }
            
            // 创建阳光射线
            const sunnyCard = document.getElementById('sunny-card');
            for (let i = 0; i < 12; i++) {
                const ray = document.createElement('div');
                ray.className = 'sun-ray';
                ray.style.width = '80px';
                ray.style.height = '10px';
                ray.style.top = '110px';
                ray.style.left = '125px';
                ray.style.transformOrigin = 'left center';
                ray.style.transform = `rotate(${i * 30}deg)`;
                ray.style.animationDelay = `${i * 0.2}s`;
                sunnyCard.appendChild(ray);
            }
            
            // 创建雪花
            const snowCard = document.getElementById('snow-card');
            for (let i = 0; i < 50; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.innerHTML = '❄';
                snowflake.style.left = `${Math.random() * 230}px`;
                snowflake.style.animationDuration = `${3 + Math.random() * 7}s`;
                snowflake.style.animationDelay = `${Math.random() * 5}s`;
                snowCard.appendChild(snowflake);
            }
        }
        
        // 显示特定天气
        function showWeather(weatherType) {
            const cards = document.querySelectorAll('.weather-card');
            cards.forEach(card => {
                card.style.display = 'none';
            });
            
            document.getElementById(`${weatherType}-card`).style.display = 'block';
            
            // 更新按钮状态
            const buttons = document.querySelectorAll('.controls button');
            buttons.forEach(button => {
                button.classList.remove('active');
            });
            event.target.classList.add('active');
        }
        
        // 显示所有天气卡片
        function showAllWeather() {
            const cards = document.querySelectorAll('.weather-card');
            cards.forEach(card => {
                card.style.display = 'block';
            });
            
            // 更新按钮状态
            const buttons = document.querySelectorAll('.controls button');
            buttons.forEach(button => {
                button.classList.remove('active');
            });
            buttons[0].classList.add('active');
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initWeatherElements();
        };
    </script>
</body>
</html>

 

结论是：太惊讶太可怕了，程序员都要失业了

 

posted @ 2025-03-25 13:11  充实地生活着  阅读(123)  评论(0)    收藏  举报