在知乎看到说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>
结论是：太惊讶太可怕了，程序员都要失业了
