文章目录
零、前言
Claude 3.7 Sonnet（下面简称 Claude 3.7）由 Anthropic 发布，震撼了 AI 编程领域。
这款被誉为“全球首个混合推理模型”的 AI 工具，不仅在代码生成能力上实现了质的突破，还通过技术创新重新定义了开发者与 AI 的协作方式。
优势
Claude 3.7 的最大亮点是其混合推理架构，将通用语言模型与深度推理能力相结合，支持两种交互模式：
- 快速响应模式：即时生成代码，适用于简单任务或原型设计。
- 扩展思考模式：模型会进行“自我反思”，逐步展示思考过程，生成更复杂、逻辑严谨的代码。用户可通过 API 设置“思考预算”（最高 128K token），在速度、成本与质量之间灵活权衡。
这种设计使 Claude 3.7 能够满足日常编码需求，同时也能解决需要深入规划的工程问题。
超强的编码能力
Claude 3.7 能够一次生成 2000 到 3200 行代码，远超同类模型。
经过实测，Claude 3.7 的表现令人震惊！UI 设计精美，编写代码速度比传统开发者快数十倍，Python 脚本瞬间生成，轻松超越 Deepseek V3、GPT-4.1 等其他 AI 模型。
虚竹哥AI系统已经集成了 claude-3-7-sonnet+claude-3-opus ，今天跟虚竹哥一起来测评下吧。
一、操作指南
操作指导
ChatGPT 4o国内直接访问地址：https://sass.xiaoxuzhu.cn/
输入购买的授权码即可。
选择claude-3-7-sonnet 大模型或claude-3-opus 大模型
二、单文件天气卡片动画
Claude 3.7 在编码和前端网页开发方面表现出特别显著的改进。
提示词：
创建一个单独的 HTML 文件，包含 CSS 和 JavaScript，用于生成一个带动画效果的天气卡片。卡片并排显示，背景为深色。动画展示：
- 风（Wind）：移动的云朵、摇摆的树、风线动画
- 雨（Rain）：下落的雨滴、积水动画
- 晴（Sun）：闪耀的阳光、明亮背景动画
- 雪（Snow）：飘落的雪花、积雪效果
JavaScript 包含切换天气状态的功能（按钮或函数）。
Claude 3.7
可以使用我朋友的网站，“菜鸟教程” ，直接在线运行：https://www.runoob.com/
生成的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画天气卡片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #1a1a2e;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
h1 {
margin-bottom: 2rem;
text-align: center;
}
.controls {
margin-bottom: 2rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
button {
padding: 0.75rem 1.5rem;
background-color: #4a4e69;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s ease;
}
button:hover {
background-color: #6b7aa1;
transform: translateY(-2px);
}
button.active {
background-color: #6b7aa1;
box-shadow: 0 0 10px rgba(107, 122, 161, 0.7);
}
.weather-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.weather-card {
width: 280px;
height: 380px;
background-color: #16213e;
border-radius: 15px;
overflow: hidden;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.weather-card:hover {
transform: translateY(-10px);
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
z-index: 10;
}
.card-title {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.card-temp {
font-size: 3rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.card-desc {
font-size: 1rem;
opacity: 0.8;
}
/* 风的动画效果 */
.wind-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: #3a506b;
}
.cloud {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.cloud-1 {
width: 60px;
height: 30px;
top: 40px;
left: -60px;
animation: moveCloud 15s linear infinite;
}
.cloud-2 {
width: 80px;
height: 40px;
top: 100px;
left: -80px;
animation: moveCloud 12s linear infinite;
animation-delay: 2s;
}
.cloud-3 {
width: 50px;
height: 25px;
top: 150px;
left: -50px;
animation: moveCloud 10s linear infinite;
animation-delay: 5s;
}
@keyframes moveCloud {
0% {
left: -80px;
}
100% {
left: 100%;
}
}
.tree {
position: absolute;
bottom: 70px;
width: 10px;
height: 60px;
background-color: #4d3e3e;
}
.tree::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
background-color: #3a7d44;
border-radius: 50%;
top: -20px;
left: -15px;
transform-origin: 50% 80%;
animation: sway 3s ease-in-out infinite alternate;
}
.tree:nth-child(1) {
left: 30px;
height: 70px;
}
.tree:nth-child(1)::after {
animation-delay: 0.5s;
}
.tree:nth-child(2) {
left: 80px;
}
.tree:nth-child(3) {
left: 130px;
height: 80px;
}
.tree:nth-child(3)::after {
animation-delay: 1s;
}
.tree:nth-child(4) {
left: 180px;
height: 65px;
}
.tree:nth-child(4)::after {
animation-delay: 1.5s;
}
@keyframes sway {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
.wind-line {
position: absolute;
height: 2px;
background-color: rgba(255, 255, 255, 0.3);
animation: windLine 3s linear infinite;
}
@keyframes windLine {
0% {
width: 0;
opacity: 0;
left: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
width: 100%;
opacity: 0;
left: 0;
}
}
/* 雨的动画效果 */
.rain-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: #1e3a5f;
}
.raindrop {
position: absolute;
width: 2px;
background-color: rgba(255, 255, 255, 0.6);
animation: rain linear infinite;
}
@keyframes rain {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(380px);
}
}
.puddle {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 10px;
background-color: rgba(120, 180, 255, 0.3);
border-radius: 50%;
}
.ripple {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.4);
transform: translate(-50%, -50%);
animation: ripple 2s linear infinite;
opacity: 0;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.8;
}
100% {
width: 50px;
height: 50px;
opacity: 0;
}
}
/* 晴天的动画效果 */
.sun-bg {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #4a8fe7, #7eb6ff);
overflow: hidden;
}
.sun {
position: absolute;
width: 80px;
height: 80px;
background-color: #ffde59;
border-radius: 50%;
top: 60px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 50px #ffde59;
animation: pulse 3s ease-in-out infinite alternate;
}
@keyframes pulse {
0% {
box-shadow: 0 0 30px #ffde59;
}
100% {
box-shadow: 0 0 80px #ffde59;
}
}
.sun-ray {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 2px;
background-color: rgba(255, 222, 89, 0.6);
transform-origin: 0 0;
}
.small-cloud {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: floatCloud 20s linear infinite;
}
@keyframes floatCloud {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(380px);
}
}
/* 雪的动画效果 */
.snow-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: #d6e5fa;
}
.snowflake {
position: absolute;
color: white;
font-size: 16px;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% {
transform: translateY(-20px) rotate(0deg);
}
100% {
transform: translateY(380px) rotate(360deg);
}
}
.snow-ground {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: white;
border-top-left-radius: 50% 20px;
border-top-right-radius: 50% 20px;
}
.snow-pile {
position: absolute;
background-color: white;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>动态天气卡片</h1>
<div class="controls">
<button id="wind-btn" class="active">风</button>
<button id="rain-btn">雨</button>
<button id="sun-btn">晴</button>
<button id="snow-btn">雪</button>
</div>
<div class="weather-container">
<!-- 风天气卡片 -->
<div class="weather-card" id="wind-card">
<div class="wind-bg">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
<div class="tree"></div>
</div>
<div class="card-content">
<h2 class="card-title">风</h2>
<div class="card-temp">18°C</div>
<p class="card-desc">大风预警，风速12km/h</p>
</div>
</div>
<!-- 雨天气卡片 -->
<div class="weather-card" id="rain-card" style="display: none;">
<div class="rain-bg">
<div class="puddle"></div>
</div>
<div class="card-content">
<h2 class="card-title">雨</h2>
<div class="card-temp">15°C</div>
<p class="card-desc">中雨，降水概率90%</p>
</div>
</div>
<!-- 晴天气卡片 -->
<div class="weather-card" id="sun-card" style="display: none;">
<div class="sun-bg">
<div class="sun"></div>
</div>
<div class="card-content">
<h2 class="card-title">晴</h2>
<div class="card-temp">28°C</div>
<p class="card-desc">晴朗，紫外线强度高</p>
</div>
</div>
<!-- 雪天气卡片 -->
<div class="weather-card" id="snow-card" style="display: none;">
<div class="snow-bg">
<div class="snow-ground"></div>
</div>
<div class="card-content">
<h2 class="card-title">雪</h2>
<div class="card-temp">-5°C</div>
<p class="card-desc">小雪，积雪2-5cm</p>
</div>
</div>
</div>
<script>
// 天气切换功能
const buttons = document.querySelectorAll('button');
const cards = document.querySelectorAll('.weather-card');
buttons.forEach(button => {
button.addEventListener('click', function() {
// 移除所有按钮的active类
buttons.forEach(btn => btn.classList.remove('active'));
// 给当前点击的按钮添加active类
this.classList.add('active');
// 隐藏所有卡片
cards.forEach(card => card.style.display = 'none');
// 显示对应的卡片
const weatherType = this.id.split('-')[0];
document.getElementById(`${weatherType}-card`).style.display = 'block';
});
});
// 风动画
function createWindLines() {
const windBg = document.querySelector('.wind-bg');
setInterval(() => {
const line = document.createElement('div');
line.classList.add('wind-line');
const top = Math.random() * 200 + 50;
line.style.top = `${top}px`;
windBg.appendChild(line);
setTimeout(() => {
line.remove();
}, 3000);
}, 500);
}
// 雨动画
function createRaindrops() {
const rainBg = document.querySelector('.rain-bg');
const puddle = document.querySelector('.puddle');
// 创建雨滴
for (let i = 0; i < 100; i++) {
const raindrop = document.createElement('div');
raindrop.classList.add('raindrop');
const left = Math.random() * 280;
const height = Math.random() * 10 + 15;
const delay = Math.random() * 5;
const duration = Math.random() * 0.5 + 0.7;
raindrop.style.left = `${left}px`;
raindrop.style.height = `${height}px`;
raindrop.style.animationDelay = `${delay}s`;
raindrop.style.animationDuration = `${duration}s`;
rainBg.appendChild(raindrop);
}
// 创建水波纹
setInterval(() => {
const ripple = document.createElement('div');
ripple.classList.add('ripple');
const left = Math.random() * 180 + 10;
ripple.style.left = `${left}px`;
ripple.style.top = '0';
puddle.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 2000);
}, 300);
}
// 晴天动画
function createSunRays() {
const sun = document.querySelector('.sun');
for (let i = 0; i < 12; i++) {
const ray = document.createElement('div');
ray.classList.add('sun-ray');
const angle = i * 30;
ray.style.transform = `rotate(${angle}deg)`;
sun.appendChild(ray);
}
// 添加小云朵
const sunBg = document.querySelector('.sun-bg');
for (let i = 0; i < 3; i++) {
const smallCloud = document.createElement('div');
smallCloud.classList.add('small-cloud');
const size = Math.random() * 30 + 40;
const top = Math.random() * 150 + 30;
const delay = Math.random() * 10;
smallCloud.style.width = `${size}px`;
smallCloud.style.height = `${size / 2}px`;
smallCloud.style.top = `${top}px`;
smallCloud.style.animationDelay = `${delay}s`;
sunBg.appendChild(smallCloud);
}
}
// 雪动画
function createSnowflakes() {
const snowBg = document.querySelector('.snow-bg');
// 创建雪花
for (let i = 0; i < 50; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
const left = Math.random() * 280;
const size = Math.random() * 10 + 8;
const delay = Math.random() * 5;
const duration = Math.random() * 5 + 5;
snowflake.style.left = `${left}px`;
snowflake.style.fontSize = `${size}px`;
snowflake.style.animationDelay = `${delay}s`;
snowflake.style.animationDuration = `${duration}s`;
snowBg.appendChild(snowflake);
}
// 创建雪堆
for (let i = 0; i < 5; i++) {
const snowPile = document.createElement('div');
snowPile.classList.add('snow-pile');
const size = Math.random() * 40 + 60;
const left = Math.random() * 200 + 40;
snowPile.style.width = `${size}px`;
snowPile.style.height = `${size / 2}px`;
snowPile.style.bottom = `${30 + Math.random() * 20}px`;
snowPile.style.left = `${left}px`;
snowBg.appendChild(snowPile);
}
}
// 初始化所有动画
function initAnimations() {
createWindLines();
createRaindrops();
createSunRays();
createSnowflakes();
}
// 页面加载完成后初始化
window.addEventListener('load', initAnimations);
</script>
</body>
</html>
deepseek R1
可以使用我朋友的网站，“菜鸟教程” ，直接在线运行：https://www.runoob.com/
生成的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
gap: 20px;
}
.weather-card {
width: 300px;
height: 400px;
background: #2d2d2d;
border-radius: 15px;
position: relative;
overflow: hidden;
}
/* 通用天气元素 */
.weather-element {
position: absolute;
opacity: 0;
transition: opacity 0.5s;
}
/* 风动画 */
.wind .cloud {
width: 100px;
height: 40px;
background: #4a4a4a;
border-radius: 20px;
animation: moveCloud 8s linear infinite;
}
.wind .tree {
width: 20px;
height: 80px;
background: #3d5a3d;
position: absolute;
bottom: 0;
animation: sway 3s ease-in-out infinite;
}
/* 雨动画 */
.rain .drop {
width: 2px;
height: 15px;
background: #00a8ff;
position: absolute;
animation: fall 1s linear infinite;
}
/* 晴动画 */
.sun .ray {
width: 100%;
height: 100%;
background: radial-gradient(circle, #ffd700 20%, transparent 60%);
animation: shine 3s linear infinite;
}
/* 雪动画 */
.snow .flake {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
position: absolute;
animation: fall 3s linear infinite;
}
/* 动画关键帧 */
@keyframes moveCloud {
0% { transform: translateX(-110%); }
100% { transform: translateX(110%); }
}
@keyframes sway {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes fall {
0% { transform: translateY(-100%); }
100% { transform: translateY(400px); }
}
@keyframes shine {
0% { opacity: 0.3; }
50% { opacity: 0.8; }
100% { opacity: 0.3; }
}
.active .weather-element {
opacity: 1;
}
</style>
</head>
<body>
<div class="weather-card wind active">
<div class="weather-element cloud" style="top: 20%; left: 10%"></div>
<div class="weather-element tree" style="left: 30%"></div>
<div class="weather-element tree" style="left: 60%"></div>
</div>
<div class="weather-card rain">
<!-- 生成雨滴 -->
</div>
<div class="weather-card sun">
<div class="weather-element ray"></div>
</div>
<div class="weather-card snow">
<!-- 生成雪花 -->
</div>
<script>
function createElements(className, count) {
const container = document.querySelector(`.${className}`);
for (let i = 0; i < count; i++) {
const element = document.createElement('div');
element.className = `weather-element ${className.includes('rain') ? 'drop' : 'flake'}`;
element.style.left = `${Math.random() * 100}%`;
element.style.animationDelay = `${Math.random() * 2}s`;
container.appendChild(element);
}
}
// 初始化天气元素
createElements('rain', 30);
createElements('snow', 30);
// 切换功能
document.querySelectorAll('.weather-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelector('.active')?.classList.remove('active');
card.classList.add('active');
});
});
</script>
</body>
</html>
Gemini 2.5 Pro
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画天气卡片</title>
<style>
/* Global Styles */
body {
background-color: #1a1a2e; /* 深蓝紫色背景 */
color: #e0e0e0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column; /* 让按钮和卡片垂直排列 */
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
/* Controls Container */
.controls {
margin-bottom: 30px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.controls button {
background-color: #4a4a8a; /* 深蓝紫色按钮 */
color: #fff;
border: none;
padding: 10px 15px;
margin: 0 5px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s ease, transform 0.1s ease;
}
.controls button:hover {
background-color: #6a6ab4; /* 悬停时变亮 */
}
.controls button:active {
transform: scale(0.95); /* 点击时缩小 */
}
/* Card Container */
.weather-cards-container {
display: flex;
flex-wrap: wrap; /* 在小屏幕上换行 */
justify-content: center;
gap: 25px; /* 卡片间距 */
width: 100%;
max-width: 1200px; /* 限制最大宽度 */
}
/* Individual Card Styles */
.weather-card {
background: linear-gradient(145deg, #2c2c54, #1a1a3a); /* 深色渐变 */
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4),
-5px -5px 15px rgba(255, 255, 255, 0.05);
padding: 20px;
width: 250px; /* 固定宽度 */
height: 350px; /* 固定高度 */
text-align: center;
position: relative; /* 用于绝对定位动画元素 */
overflow: hidden; /* 隐藏超出卡片范围的动画 */
transition: background 0.5s ease; /* 背景切换过渡 */
}
.weather-card h2 {
margin-top: 0;
margin-bottom: 15px;
color: #fff;
font-size: 1.5em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.animation-area {
width: 100%;
height: 250px; /* 动画区域高度 */
position: relative;
overflow: hidden; /* 再次确保动画在此区域内 */
}
/* --- Animation Elements --- */
/* Shared positioning */
.animation-area > div,
.animation-area .icon {
position: absolute;
pointer-events: none; /* 防止元素干扰鼠标事件 */
}
/* == Wind Elements == */
.cloud {
width: 80px;
height: 40px;
background: #f0f0f0;
border-radius: 50px;
top: 30px;
left: -100px; /* Start off-screen */
opacity: 0.8;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: #f0f0f0;
border-radius: 50%;
}
.cloud::before {
width: 40px; height: 40px; top: -20px; left: 15px;
}
.cloud::after {
width: 50px; height: 50px; top: -15px; left: 35px;
}
.cloud.fast { animation: moveCloud 8s linear infinite; }
.cloud.slow { animation: moveCloud 15s linear infinite 2s; } /* Different speed/delay */
.tree {
width: 10px; /* Trunk width */
height: 60px; /* Trunk height */
background-color: #8b4513; /* Brown */
bottom: 20px; /* Position above potential puddle */
left: 40%;
transform-origin: bottom center;
animation: swayTree 3s ease-in-out infinite alternate;
}
.tree::before { /* Canopy */
content: '';
position: absolute;
width: 50px;
height: 50px;
background-color: #228b22; /* Forest green */
border-radius: 50%;
top: -35px;
left: -20px; /* Center canopy on trunk */
transform-origin: bottom center; /* Ensure canopy sways with trunk */
}
.wind-line {
width: 50px;
height: 2px;
background: rgba(255, 255, 255, 0.3);
border-radius: 1px;
top: 50%;
left: -60px; /* Start off-screen */
opacity: 0;
animation: blowWind 1.5s linear infinite;
}
.wind-line:nth-child(2) { top: 60%; animation-delay: 0.3s; }
.wind-line:nth-child(3) { top: 70%; animation-delay: 0.6s; }
/* == Rain Elements == */
.raindrop {
width: 2px;
height: 10px;
background: linear-gradient(to bottom, rgba(173, 216, 230, 0), rgba(173, 216, 230, 0.8)); /* Light blue */
border-radius: 0 0 2px 2px;
top: -20px; /* Start above */
animation: fallRain 0.7s linear infinite;
}
.puddle {
width: 80px;
height: 10px;
background: rgba(70, 130, 180, 0.5); /* Steel blue */
border-radius: 50%;
bottom: 5px;
left: 50%;
transform: translateX(-50%) scaleY(0); /* Initially flat */
opacity: 0;
animation: formPuddle 5s 1s forwards; /* Animate once after delay */
}
.splash {
width: 5px;
height: 2px;
background: rgba(173, 216, 230, 0.8);
border-radius: 50%;
bottom: 10px; /* Just above puddle */
opacity: 0;
animation: rainSplash 0.7s ease-out infinite;
}
/* == Sun Elements == */
.sun {
width: 80px;
height: 80px;
background: radial-gradient(circle, #fff700, #fdb813); /* Yellow/Orange */
border-radius: 50%;
top: 40px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 30px #fdb813, 0 0 60px rgba(253, 184, 19, 0.5);
animation: pulseSun 4s ease-in-out infinite;
}
.sun-ray {
width: 4px;
height: 100px;
background: linear-gradient(to bottom, rgba(255, 247, 0, 0.8), rgba(255, 247, 0, 0));
position: absolute;
top: -10px; /* Position relative to sun center */
left: 38px; /* Center the ray */
transform-origin: bottom center;
animation: rotateRays 20s linear infinite; /* Slow rotation for all rays */
}
/* Create multiple rays rotated */
.sun-ray:nth-child(1) { transform: rotate(0deg); }
.sun-ray:nth-child(2) { transform: rotate(45deg); }
.sun-ray:nth-child(3) { transform: rotate(90deg); }
.sun-ray:nth-child(4) { transform: rotate(135deg); }
.sun-ray:nth-child(5) { transform: rotate(180deg); }
.sun-ray:nth-child(6) { transform: rotate(225deg); }
.sun-ray:nth-child(7) { transform: rotate(270deg); }
.sun-ray:nth-child(8) { transform: rotate(315deg); }
/* Sunny background effect */
.weather-card.weather-sunny {
background: linear-gradient(145deg, #87CEEB, #4682B4); /* Sky blue gradient */
}
/* == Snow Elements == */
.snowflake {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
top: -10px;
opacity: 0.8;
animation: fallSnow 10s linear infinite;
}
/* Add horizontal drift */
.snowflake.drift1 { animation: fallSnow 10s linear infinite, driftSnow1 3s ease-in-out infinite alternate; }
.snowflake.drift2 { animation: fallSnow 12s linear infinite, driftSnow2 4s ease-in-out infinite alternate; }
.snow-ground {
width: 100%;
height: 0px; /* Start with no snow */
background-color: #f5f5f5;
position: absolute;
bottom: 0;
left: 0;
border-radius: 5px 5px 0 0;
opacity: 0;
animation: accumulateSnow 10s 2s forwards; /* Animate once after delay */
}
/* --- Animations (@keyframes) --- */
/* Wind Animations */
@keyframes moveCloud {
from { left: -100px; }
to { left: 100%; }
}
@keyframes swayTree {
from { transform: rotate(-5deg); }
to { transform: rotate(5deg); }
}
@keyframes blowWind {
0% { left: -60px; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Rain Animations */
@keyframes fallRain {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(250px); opacity: 0; } /* Fall to bottom */
}
@keyframes formPuddle {
from { transform: translateX(-50%) scaleY(0); opacity: 0; }
to { transform: translateX(-50%) scaleY(1); opacity: 1; }
}
@keyframes rainSplash {
0% { transform: scale(0); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(2); opacity: 0; }
}
/* Sun Animations */
@keyframes pulseSun {
0%, 100% { box-shadow: 0 0 30px #fdb813, 0 0 60px rgba(253, 184, 19, 0.5); transform: translateX(-50%) scale(1); }
50% { box-shadow: 0 0 40px #fff700, 0 0 80px rgba(255, 247, 0, 0.7); transform: translateX(-50%) scale(1.05); }
}
@keyframes rotateRays {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Snow Animations */
@keyframes fallSnow {
from { transform: translateY(0); }
to { transform: translateY(260px); opacity: 0; }
}
@keyframes driftSnow1 { /* Gentle side-to-side */
from { transform: translateX(-5px); }
to { transform: translateX(5px); }
}
@keyframes driftSnow2 { /* Wider side-to-side */
from { transform: translateX(-10px); }
to { transform: translateX(10px); }
}
@keyframes accumulateSnow {
from { height: 0px; opacity: 0; }
to { height: 25px; opacity: 0.9; } /* Accumulate snow */
}
/* --- Visibility Control --- */
/* Initially hide all animation elements */
.weather-card .animation-area > div {
display: none;
}
.weather-card .animation-area .icon { /* Sun icon base */
display: none;
}
/* Show elements based on the card's class */
.weather-card.weather-windy .cloud,
.weather-card.weather-windy .tree,
.weather-card.weather-windy .wind-line {
display: block;
}
.weather-card.weather-rainy .raindrop,
.weather-card.weather-rainy .puddle,
.weather-card.weather-rainy .splash {
display: block;
}
.weather-card.weather-sunny .sun,
.weather-card.weather-sunny .sun-ray {
display: block;
}
.weather-card.weather-snowy .snowflake,
.weather-card.weather-snowy .snow-ground {
display: block;
}
</style>
</head>
<body>
<h1>动画天气卡片</h1>
<div class="controls">
<span>切换第一个卡片的天气:</span>
<button onclick="changeWeather('switchable-card', 'weather-windy', '风')">风</button>
<button onclick="changeWeather('switchable-card', 'weather-rainy', '雨')">雨</button>
<button onclick="changeWeather('switchable-card', 'weather-sunny', '晴')">晴</button>
<button onclick="changeWeather('switchable-card', 'weather-snowy', '雪')">雪</button>
</div>
<div class="weather-cards-container">
<!-- Card 1: Switchable -->
<div id="switchable-card" class="weather-card weather-windy">
<h2 id="switchable-card-title">风</h2>
<div class="animation-area">
<!-- Wind Elements -->
<div class="cloud fast"></div>
<div class="cloud slow"></div>
<div class="tree"></div>
<div class="wind-line"></div>
<div class="wind-line"></div>
<div class="wind-line"></div>
<!-- Rain Elements -->
<div class="raindrop" style="left: 20%; animation-delay: 0s;"></div>
<div class="raindrop" style="left: 40%; animation-delay: 0.3s;"></div>
<div class="raindrop" style="left: 60%; animation-delay: 0.1s;"></div>
<div class="raindrop" style="left: 80%; animation-delay: 0.5s;"></div>
<div class="raindrop" style="left: 30%; animation-delay: 0.2s;"></div>
<div class="raindrop" style="left: 70%; animation-delay: 0.4s;"></div>
<div class="puddle"></div>
<div class="splash" style="left: 30%; animation-delay: 0.1s;"></div>
<div class="splash" style="left: 65%; animation-delay: 0.4s;"></div>
<!-- Sun Elements -->
<div class="sun icon">
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
</div>
<!-- Snow Elements -->
<div class="snowflake drift1" style="left: 10%; animation-duration: 8s; animation-delay: 0s;"></div>
<div class="snowflake drift2" style="left: 30%; animation-duration: 10s; animation-delay: 2s;"></div>
<div class="snowflake drift1" style="left: 50%; animation-duration: 7s; animation-delay: 1s;"></div>
<div class="snowflake drift2" style="left: 70%; animation-duration: 11s; animation-delay: 4s;"></div>
<div class="snowflake drift1" style="left: 90%; animation-duration: 9s; animation-delay: 3s;"></div>
<div class="snowflake drift2" style="left: 20%; animation-duration: 12s; animation-delay: 5s;"></div>
<div class="snowflake drift1" style="left: 60%; animation-duration: 8s; animation-delay: 6s;"></div>
<div class="snow-ground"></div>
</div>
</div>
<!-- Card 2: Static Rain -->
<div class="weather-card weather-rainy">
<h2>雨</h2>
<div class="animation-area">
<div class="raindrop" style="left: 15%; animation-delay: 0.1s;"></div>
<div class="raindrop" style="left: 35%; animation-delay: 0.4s;"></div>
<div class="raindrop" style="left: 55%; animation-delay: 0.2s;"></div>
<div class="raindrop" style="left: 75%; animation-delay: 0.6s;"></div>
<div class="raindrop" style="left: 25%; animation-delay: 0.3s;"></div>
<div class="raindrop" style="left: 65%; animation-delay: 0.5s;"></div>
<div class="raindrop" style="left: 85%; animation-delay: 0s;"></div>
<div class="puddle"></div>
<div class="splash" style="left: 25%; animation-delay: 0.2s;"></div>
<div class="splash" style="left: 70%; animation-delay: 0.5s;"></div>
</div>
</div>
<!-- Card 3: Static Sun -->
<div class="weather-card weather-sunny">
<h2>晴</h2>
<div class="animation-area">
<div class="sun icon">
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
<div class="sun-ray"></div>
</div>
</div>
</div>
<!-- Card 4: Static Snow -->
<div class="weather-card weather-snowy">
<h2>雪</h2>
<div class="animation-area">
<div class="snowflake drift1" style="left: 15%; animation-duration: 9s; animation-delay: 1s;"></div>
<div class="snowflake drift2" style="left: 35%; animation-duration: 11s; animation-delay: 3s;"></div>
<div class="snowflake drift1" style="left: 55%; animation-duration: 8s; animation-delay: 0s;"></div>
<div class="snowflake drift2" style="left: 75%; animation-duration: 12s; animation-delay: 5s;"></div>
<div class="snowflake drift1" style="left: 95%; animation-duration: 10s; animation-delay: 2s;"></div>
<div class="snowflake drift2" style="left: 25%; animation-duration: 13s; animation-delay: 6s;"></div>
<div class="snowflake drift1" style="left: 65%; animation-duration: 9s; animation-delay: 4s;"></div>
<div class="snow-ground"></div>
</div>
</div>
</div>
<script>
function changeWeather(cardId, weatherClass, weatherName) {
const card = document.getElementById(cardId);
const titleElement = document.getElementById(cardId + '-title');
if (card) {
// 移除所有可能的天气类
card.classList.remove('weather-windy', 'weather-rainy', 'weather-sunny', 'weather-snowy');
// 添加新的天气类
card.classList.add(weatherClass);
}
if (titleElement) {
// 更新标题
titleElement.textContent = weatherName;
}
}
// --- Add more variety to rain/snow on load ---
// (Optional: Add more raindrops/snowflakes dynamically if needed,
// but the initial set covers the basics)
// Example: Generate more raindrops for the rainy card
// const rainArea = document.querySelector('.weather-rainy .animation-area');
// if (rainArea) {
// for (let i = 0; i < 10; i++) {
// const drop = document.createElement('div');
// drop.className = 'raindrop';
// drop.style.left = Math.random() * 100 + '%';
// drop.style.animationDelay = Math.random() * 1 + 's';
// drop.style.animationDuration = (Math.random() * 0.5 + 0.5) + 's'; // Vary speed
// rainArea.appendChild(drop);
// }
// }
// Similar logic can be applied for snowflakes
</script>
</body>
</html>
o4-mini-high
可以使用我朋友的网站，“菜鸟教程” ，直接在线运行：https://www.runoob.com/
生成的代码：
<!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 {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.weather-container {
display: flex;
gap: 20px;
}
.weather-card {
width: 250px;
height: 350px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
position: relative;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: transform 0.3s ease-in-out;
}
.weather-card h3 {
margin: 0;
padding: 10px 0;
font-size: 24px;
text-transform: uppercase;
}
.weather-card button {
margin-top: 15px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #444;
color: white;
font-size: 16px;
cursor: pointer;
}
.weather-card button:hover {
background-color: #555;
}
.animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 风动画 */
.wind {
background: url('https://cdn.pixabay.com/photo/2016/09/23/16/27/cloud-1697154_960_720.jpg') no-repeat center center;
animation: moveClouds 10s linear infinite;
}
@keyframes moveClouds {
0% { background-position: 0 0; }
100% { background-position: 1000px 0; }
}
.wind .tree {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 120px;
background: #2c6f2c;
animation: swayTree 2s ease-in-out infinite;
}
@keyframes swayTree {
0% { transform: translateX(-50%) rotate(0deg); }
50% { transform: translateX(-50%) rotate(10deg); }
100% { transform: translateX(-50%) rotate(-10deg); }
}
.wind .wind-lines {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 2px;
background-color: white;
animation: windLine 3s linear infinite;
}
@keyframes windLine {
0% { transform: rotate(0deg) translateX(-100px); }
100% { transform: rotate(360deg) translateX(100px); }
}
/* 雨动画 */
.rain {
background: linear-gradient(to bottom, #1e1e1e, #2c3e50);
animation: rainDrop 0.5s linear infinite;
}
@keyframes rainDrop {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
.rain .raindrop {
position: absolute;
top: -10px;
width: 5px;
height: 15px;
background-color: #3498db;
animation: fall 1s linear infinite;
}
@keyframes fall {
0% { top: -15px; }
100% { top: 100%; }
}
/* 晴天动画 */
.sunny {
background: linear-gradient(to right, #f39c12, #e67e22);
animation: sunnyBackground 3s ease-out infinite;
}
@keyframes sunnyBackground {
0% { background-color: #f39c12; }
100% { background-color: #e67e22; }
}
.sunny .sun {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background-color: #f1c40f;
border-radius: 50%;
box-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
animation: shineSun 3s ease-out infinite;
}
@keyframes shineSun {
0% { box-shadow: 0 0 15px rgba(241, 196, 15, 0.7); }
100% { box-shadow: 0 0 30px rgba(241, 196, 15, 0.8); }
}
/* 雪动画 */
.snow {
background: #2c3e50;
position: relative;
}
.snow .snowflake {
position: absolute;
top: -10px;
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
opacity: 0.8;
animation: snowFall 3s linear infinite;
}
@keyframes snowFall {
0% { top: -10px; opacity: 0.8; }
100% { top: 100%; opacity: 1; }
}
</style>
</head>
<body>
<div class="weather-container">
<div class="weather-card" id="wind-card">
<h3>风</h3>
<div class="animation-container wind">
<div class="tree"></div>
<div class="wind-lines"></div>
</div>
<button onclick="switchWeather('wind')">显示风</button>
</div>
<div class="weather-card" id="rain-card">
<h3>雨</h3>
<div class="animation-container rain">
<div class="raindrop"></div>
<div class="raindrop" style="animation-delay: 0.2s;"></div>
<div class="raindrop" style="animation-delay: 0.4s;"></div>
</div>
<button onclick="switchWeather('rain')">显示雨</button>
</div>
<div class="weather-card" id="sunny-card">
<h3>晴天</h3>
<div class="animation-container sunny">
<div class="sun"></div>
</div>
<button onclick="switchWeather('sunny')">显示晴天</button>
</div>
<div class="weather-card" id="snow-card">
<h3>雪</h3>
<div class="animation-container snow">
<div class="snowflake" style="left: 10%; animation-delay: 0.2s;"></div>
<div class="snowflake" style="left: 30%; animation-delay: 0.4s;"></div>
<div class="snowflake" style="left: 50%; animation-delay: 0.6s;"></div>
</div>
<button onclick="switchWeather('snow')">显示雪</button>
</div>
</div>
<script>
function switchWeather(weather) {
const cards = document.querySelectorAll('.weather-card');
cards.forEach(card => {
card.style.display = 'none'; // Hide all cards
});
const activeCard = document.getElementById(`${weather}-card`);
activeCard.style.display = 'block'; // Show selected weather
}
</script>
</body>
</html>
结论
根据以上对比，无论是在字体设计、画面动效还是 UI 审美方面，Claude 3.7 都表现得最为出色，远超其他模型！
Claude 3.7 >Gemini 2.5 Pro>o4-mini-high>deepseek R1
三、一句话搞定一个游戏
提示词：
用html代码+css+js 实现俄罗斯方块游戏
生成的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.game-container {
display: flex;
gap: 20px;
}
.game-board {
border: 2px solid #333;
background-color: #222;
width: 300px;
height: 600px;
display: grid;
grid-template-rows: repeat(20, 1fr);
grid-template-columns: repeat(10, 1fr);
}
.game-info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.next-piece {
border: 2px solid #333;
background-color: #222;
width: 150px;
height: 150px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
margin-bottom: 20px;
}
.stats {
border: 2px solid #333;
background-color: #fff;
padding: 20px;
width: 150px;
}
.cell {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.filled {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.color-1 { background-color: #FF0D72; } /* I */
.color-2 { background-color: #0DC2FF; } /* J */
.color-3 { background-color: #0DFF72; } /* L */
.color-4 { background-color: #F538FF; } /* O */
.color-5 { background-color: #FF8E0D; } /* S */
.color-6 { background-color: #FFE138; } /* T */
.color-7 { background-color: #3877FF; } /* Z */
.controls {
margin-top: 20px;
text-align: center;
}
button {
padding: 10px 15px;
margin: 5px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
.game-over {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
font-size: 24px;
padding: 20px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-board" id="board"></div>
<div class="game-info">
<div>
<h2>下一个方块</h2>
<div class="next-piece" id="next-piece"></div>
</div>
<div class="stats">
<h2>得分: <span id="score">0</span></h2>
<h2>等级: <span id="level">1</span></h2>
<h2>消除行数: <span id="lines">0</span></h2>
</div>
<div class="controls">
<button id="start-btn">开始游戏</button>
<button id="pause-btn">暂停</button>
<p>方向键控制移动，空格键快速下落</p>
</div>
</div>
</div>
<div class="game-over" id="game-over">
<h1>游戏结束!</h1>
<p>最终得分: <span id="final-score">0</span></p>
<button id="restart-btn">重新开始</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 游戏常量
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = 30;
const NEXT_BLOCK_SIZE = 30;
// 游戏变量
let board = createEmptyBoard();
let currentPiece = null;
let nextPiece = null;
let score = 0;
let level = 1;
let lines = 0;
let gameInterval = null;
let isPaused = false;
let isGameOver = false;
// 方块形状定义
const SHAPES = [
[], // 空占位，使索引从1开始
[ // I
[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
],
[ // J
[1, 0, 0],
[1, 1, 1],
[0, 0, 0]
],
[ // L
[0, 0, 1],
[1, 1, 1],
[0, 0, 0]
],
[ // O
[1, 1],
[1, 1]
],
[ // S
[0, 1, 1],
[1, 1, 0],
[0, 0, 0]
],
[ // T
[0, 1, 0],
[1, 1, 1],
[0, 0, 0]
],
[ // Z
[1, 1, 0],
[0, 1, 1],
[0, 0, 0]
]
];
// DOM元素
const boardElement = document.getElementById('board');
const nextPieceElement = document.getElementById('next-piece');
const scoreElement = document.getElementById('score');
const levelElement = document.getElementById('level');
const linesElement = document.getElementById('lines');
const startButton = document.getElementById('start-btn');
const pauseButton = document.getElementById('pause-btn');
const gameOverElement = document.getElementById('game-over');
const finalScoreElement = document.getElementById('final-score');
const restartButton = document.getElementById('restart-btn');
// 初始化游戏板
function initBoard() {
boardElement.innerHTML = '';
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = row;
cell.dataset.col = col;
boardElement.appendChild(cell);
}
}
}
// 初始化下一个方块预览区
function initNextPieceBoard() {
nextPieceElement.innerHTML = '';
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = row;
cell.dataset.col = col;
nextPieceElement.appendChild(cell);
}
}
}
// 创建空游戏板数组
function createEmptyBoard() {
return Array.from({ length: ROWS }, () => Array(COLS).fill(0));
}
// 生成随机方块
function getRandomPiece() {
const shapeIndex = Math.floor(Math.random() * 7) + 1;
return {
shape: SHAPES[shapeIndex],
color: shapeIndex,
row: 0,
col: Math.floor((COLS - SHAPES[shapeIndex][0].length) / 2)
};
}
// 绘制游戏板
function drawBoard() {
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = boardElement.querySelector(`[data-row="${row}"][data-col="${col}"]`);
const value = board[row][col];
cell.className = 'cell';
if (value > 0) {
cell.classList.add('filled', `color-${value}`);
}
}
}
}
// 绘制当前方块
function drawPiece(piece) {
if (!piece) return;
const { shape, color, row, col } = piece;
for (let r = 0; r < shape.length; r++) {
for (let c = 0; c < shape[r].length; c++) {
if (shape[r][c]) {
const boardRow = row + r;
const boardCol = col + c;
if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
const cell = boardElement.querySelector(`[data-row="${boardRow}"][data-col="${boardCol}"]`);
cell.classList.add('filled', `color-${color}`);
}
}
}
}
}
// 绘制下一个方块
function drawNextPiece() {
// 清空预览区
nextPieceElement.querySelectorAll('.cell').forEach(cell => {
cell.className = 'cell';
});
if (!nextPiece) return;
const { shape, color } = nextPiece;
const offsetRow = (4 - shape.length) / 2;
const offsetCol = (4 - shape[0].length) / 2;
for (let r = 0; r < shape.length; r++) {
for (let c = 0; c < shape[r].length; c++) {
if (shape[r][c]) {
const previewRow = Math.floor(offsetRow) + r;
const previewCol = Math.floor(offsetCol) + c;
const cell = nextPieceElement.querySelector(`[data-row="${previewRow}"][data-col="${previewCol}"]`);
cell.classList.add('filled', `color-${color}`);
}
}
}
}
// 检查碰撞
function checkCollision(piece, rowOffset = 0, colOffset = 0) {
const { shape, row, col } = piece;
for (let r = 0; r < shape.length; r++) {
for (let c = 0; c < shape[r].length; c++) {
if (shape[r][c]) {
const newRow = row + r + rowOffset;
const newCol = col + c + colOffset;
// 检查边界
if (newRow >= ROWS || newCol < 0 || newCol >= COLS) {
return true;
}
// 检查已有方块
if (newRow >= 0 && board[newRow][newCol]) {
return true;
}
}
}
}
return false;
}
// 旋转方块
function rotatePiece(piece) {
const { shape, color, row, col } = piece;
const newShape = [];
// 转置矩阵
for (let c = 0; c < shape[0].length; c++) {
newShape.push([]);
for (let r = shape.length - 1; r >= 0; r--) {
newShape[c].push(shape[r][c]);
}
}
const newPiece = { shape: newShape, color, row, col };
// 检查旋转后是否有碰撞
if (checkCollision(newPiece)) {
// 尝试墙踢（wall kick）
for (let offset of [-1, 1, -2, 2]) {
newPiece.col += offset;
if (!checkCollision(newPiece)) {
return newPiece;
}
newPiece.col -= offset;
}
return piece; // 如果无法旋转，返回原方块
}
return newPiece;
}
// 移动方块
function movePiece(rowOffset, colOffset) {
if (isPaused || isGameOver || !currentPiece) return;
if (!checkCollision(currentPiece, rowOffset, colOffset)) {
currentPiece.row += rowOffset;
currentPiece.col += colOffset;
updateGame();
return true;
} else if (rowOffset > 0) {
// 如果是向下移动且发生碰撞，则固定方块
lockPiece();
return false;
}
return false;
}
// 固定方块到游戏板
function lockPiece() {
const { shape, color, row, col } = currentPiece;
for (let r = 0; r < shape.length; r++) {
for (let c = 0; c < shape[r].length; c++) {
if (shape[r][c]) {
const boardRow = row + r;
const boardCol = col + c;
if (boardRow >= 0) {
board[boardRow][boardCol] = color;
} else {
// 如果方块锁定在顶部以上，游戏结束
endGame();
return;
}
}
}
}
// 检查并清除完整行
clearLines();
// 生成新方块
spawnNewPiece();
}
// 生成新方块
function spawnNewPiece() {
currentPiece = nextPiece || getRandomPiece();
nextPiece = getRandomPiece();
drawNextPiece();
// 检查新方块是否可以放置
if (checkCollision(currentPiece)) {
endGame();
}
}
// 清除完整行
function clearLines() {
let linesCleared = 0;
for (let row = ROWS - 1; row >= 0; row--) {
if (board[row].every(cell => cell > 0)) {
// 删除该行并在顶部添加新行
board.splice(row, 1);
board.unshift(Array(COLS).fill(0));
linesCleared++;
row++; // 再次检查同一行（现在是新行）
}
}
if (linesCleared > 0) {
// 更新分数
updateScore(linesCleared);
}
}
// 更新分数
function updateScore(linesCleared) {
const linePoints = [0, 40, 100, 300, 1200]; // 0, 1, 2, 3, 4行的分数
score += linePoints[linesCleared] * level;
lines += linesCleared;
// 每10行升一级
level = Math.floor(lines / 10) + 1;
// 更新显示
scoreElement.textContent = score;
levelElement.textContent = level;
linesElement.textContent = lines;
// 根据等级调整游戏速度
updateGameSpeed();
}
// 更新游戏速度
function updateGameSpeed() {
if (gameInterval) {
clearInterval(gameInterval);
}
const speed = Math.max(100, 1000 - (level - 1) * 100); // 随等级提高速度
gameInterval = setInterval(gameLoop, speed);
}
// 游戏主循环
function gameLoop() {
if (isPaused || isGameOver) return;
movePiece(1, 0); // 方块自动下落
}
// 更新游戏状态
function updateGame() {
drawBoard();
drawPiece(currentPiece);
}
// 开始游戏
function startGame() {
if (gameInterval) {
clearInterval(gameInterval);
}
// 重置游戏状态
board = createEmptyBoard();
score = 0;
level = 1;
lines = 0;
isPaused = false;
isGameOver = false;
// 更新显示
scoreElement.textContent = score;
levelElement.textContent = level;
linesElement.textContent = lines;
// 隐藏游戏结束界面
gameOverElement.style.display = 'none';
// 生成初始方块
nextPiece = getRandomPiece();
spawnNewPiece();
// 开始游戏循环
updateGameSpeed();
}
// 暂停/继续游戏
function togglePause() {
if (isGameOver) return;
isPaused = !isPaused;
pauseButton.textContent = isPaused ? '继续' : '暂停';
if (!isPaused) {
updateGame();
}
}
// 结束游戏
function endGame() {
isGameOver = true;
clearInterval(gameInterval);
finalScoreElement.textContent = score;
gameOverElement.style.display = 'block';
}
// 快速下落
function hardDrop() {
if (isPaused || isGameOver || !currentPiece) return;
while (movePiece(1, 0)) {
// 持续下落直到碰撞
}
}
// 键盘控制
function handleKeyPress(event) {
if (isGameOver) return;
switch (event.key) {
case 'ArrowLeft':
movePiece(0, -1);
break;
case 'ArrowRight':
movePiece(0, 1);
break;
case 'ArrowDown':
movePiece(1, 0);
break;
case 'ArrowUp':
currentPiece = rotatePiece(currentPiece);
updateGame();
break;
case ' ': // 空格键
hardDrop();
break;
case 'p':
case 'P':
togglePause();
break;
}
}
// 初始化游戏
function init() {
initBoard();
initNextPieceBoard();
// 添加事件监听器
document.addEventListener('keydown', handleKeyPress);
startButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', togglePause);
restartButton.addEventListener('click', startGame);
}
// 启动游戏
init();
});
</script>
</body>
</html>
生成的代码直接是可运行的游戏，而且效果非常棒。玩了一分多钟，哈哈～
四、一句话搞定一个大数据大屏预览
提示词：
写一个比亚迪 2025年 3月份汽车销售排行榜的大屏预览的前端页面
生成的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>比亚迪汽车销售排行榜 - 2025年3月</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background-color: #0a1929;
color: #ffffff;
margin: 0;
padding: 0;
overflow: hidden;
}
.dashboard-container {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
padding: 20px;
gap: 20px;
}
.header {
grid-column: 1 / 3;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid #2a4b70;
}
.title {
font-size: 28px;
font-weight: bold;
color: #ffffff;
}
.date {
font-size: 18px;
color: #64b5f6;
}
.kpi-cards {
display: flex;
gap: 15px;
}
.kpi-card {
background-color: #132f4c;
border-radius: 10px;
padding: 15px;
min-width: 150px;
text-align: center;
}
.kpi-value {
font-size: 24px;
font-weight: bold;
margin: 5px 0;
}
.kpi-label {
font-size: 14px;
color: #90caf9;
}
.positive {
color: #4caf50;
}
.negative {
color: #f44336;
}
.main-content {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 20px;
}
.chart-container {
background-color: #132f4c;
border-radius: 10px;
padding: 20px;
}
.chart-title {
font-size: 18px;
margin-bottom: 15px;
color: #90caf9;
}
.sidebar {
grid-row: 2;
grid-column: 2;
display: flex;
flex-direction: column;
gap: 20px;
}
.footer {
grid-column: 1 / 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.ranking-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 5px;
}
.ranking-table th {
padding: 10px;
text-align: left;
color: #90caf9;
font-weight: normal;
}
.ranking-table td {
padding: 10px;
background-color: #1e3a5f;
}
.ranking-table tr td:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.ranking-table tr td:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.model-icon {
width: 40px;
height: 40px;
background-color: #0d47a1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.model-cell {
display: flex;
align-items: center;
}
.progress-bar-container {
width: 100%;
height: 8px;
background-color: #0a1929;
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #64b5f6;
border-radius: 4px;
}
.heat-map {
height: 100%;
background-color: #132f4c;
border-radius: 10px;
padding: 20px;
}
.map-container {
height: 100%;
background-image: url('china-map-outline.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- 头部区域 -->
<div class="header">
<div>
<div class="title">比亚迪汽车销售排行榜</div>
<div class="date">2025年3月</div>
</div>
<div class="kpi-cards">
<div class="kpi-card">
<div class="kpi-label">月度总销量</div>
<div class="kpi-value">286,575辆</div>
<div class="kpi-label positive">+18.3% 同比</div>
</div>
<div class="kpi-card">
<div class="kpi-label">市场份额</div>
<div class="kpi-value">23.7%</div>
<div class="kpi-label positive">+2.1% 环比</div>
</div>
<div class="kpi-card">
<div class="kpi-label">新能源市场排名</div>
<div class="kpi-value">#1</div>
<div class="kpi-label">连续15个月</div>
</div>
<div class="kpi-card">
<div class="kpi-label">目标达成率</div>
<div class="kpi-value">96.8%</div>
<div class="kpi-label negative">-3.2%</div>
</div>
</div>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 车型销量排行榜 -->
<div class="chart-container">
<div class="chart-title">车型销量排行榜</div>
<canvas id="salesRankingChart"></canvas>
</div>
<!-- 销量分布 -->
<div class="chart-container">
<div class="chart-title">销量分布</div>
<div style="display: flex; height: 100%;">
<div style="flex: 1;">
<canvas id="energyTypeChart"></canvas>
</div>
<div style="flex: 1;">
<canvas id="vehicleTypeChart"></canvas>
</div>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div class="sidebar">
<!-- 趋势分析 -->
<div class="chart-container">
<div class="chart-title">近6个月销量趋势</div>
<canvas id="salesTrendChart"></canvas>
</div>
<!-- 关键绩效指标 -->
<div class="chart-container">
<div class="chart-title">关键绩效指标</div>
<table class="ranking-table">
<tr>
<td>订单转化率</td>
<td>78.5%</td>
</tr>
<tr>
<td>库存周转率</td>
<td>12.3天</td>
</tr>
<tr>
<td>客单价</td>
<td>¥186,420</td>
</tr>
<tr>
<td>线上销售占比</td>
<td>42.7%</td>
</tr>
</table>
</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<!-- 详细销量表格 -->
<div class="chart-container">
<div class="chart-title">车型详细销量</div>
<table class="ranking-table">
<thead>
<tr>
<th>排名</th>
<th>车型</th>
<th>销量</th>
<th>占比</th>
<th>环比</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="model-cell"><div class="model-icon">海</div>比亚迪海豚</td>
<td>42,865辆</td>
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 85%;"></div>
</div>
</td>
<td class="positive">+12.4%</td>
</tr>
<tr>
<td>2</td>
<td class="model-cell"><div class="model-icon">宋</div>比亚迪宋PLUS</td>
<td>38,742辆</td>
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 77%;"></div>
</div>
</td>
<td class="positive">+8.2%</td>
</tr>
<tr>
<td>3</td>
<td class="model-cell"><div class="model-icon">汉</div>比亚迪汉</td>
<td>35,128辆</td>
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 70%;"></div>
</div>
</td>
<td class="negative">-2.1%</td>
</tr>
<tr>
<td>4</td>
<td class="model-cell"><div class="model-icon">元</div>比亚迪元PLUS</td>
<td>29,876辆</td>
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</td>
<td class="positive">+5.7%</td>
</tr>
<tr>
<td>5</td>
<td class="model-cell"><div class="model-icon">秦</div>比亚迪秦PLUS</td>
<td>26,542辆</td>
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 53%;"></div>
</div>
</td>
<td class="positive">+3.9%</td>
</tr>
</tbody>
</table>
</div>
<!-- 区域销售热力图 -->
<div class="heat-map">
<div class="chart-title">区域销售热力图</div>
<div class="map-container"></div>
</div>
</div>
</div>
<script>
// 初始化图表
document.addEventListener('DOMContentLoaded', function() {
// 车型销量排行榜
const salesRankingCtx = document.getElementById('salesRankingChart').getContext('2d');
new Chart(salesRankingCtx, {
type: 'bar',
data: {
labels: ['海豚', '宋PLUS', '汉', '元PLUS', '秦PLUS', '唐', '海鸥', '驱逐舰', 'seal', '护卫舰'],
datasets: [{
label: '销量（辆）',
data: [42865, 38742, 35128, 29876, 26542, 22187, 19654, 17832, 15421, 12876],
backgroundColor: '#64b5f6',
borderRadius: 5
}]
},
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
color: '#1e3a5f'
},
ticks: {
color: '#90caf9'
}
},
y: {
grid: {
display: false
},
ticks: {
color: '#90caf9'
}
}
}
}
});
// 能源类型分布
const energyTypeCtx = document.getElementById('energyTypeChart').getContext('2d');
new Chart(energyTypeCtx, {
type: 'doughnut',
data: {
labels: ['纯电动', '插电混动', '燃油车'],
datasets: [{
data: [45, 42, 13],
backgroundColor: ['#4caf50', '#2196f3', '#ff9800']
}]
},
options: {
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#90caf9'
}
},
title: {
display: true,
text: '按能源类型',
color: '#ffffff',
font: {
size: 16
}
}
}
}
});
// 车型类别分布
const vehicleTypeCtx = document.getElementById('vehicleTypeChart').getContext('2d');
new Chart(vehicleTypeCtx, {
type: 'doughnut',
data: {
labels: ['SUV', '轿车', 'MPV', '其他'],
datasets: [{
data: [52, 38, 7, 3],
backgroundColor: ['#f44336', '#9c27b0', '#3f51b5', '#607d8b']
}]
},
options: {
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#90caf9'
}
},
title: {
display: true,
text: '按车型类别',
color: '#ffffff',
font: {
size: 16
}
}
}
}
});
// 销量趋势
const salesTrendCtx = document.getElementById('salesTrendChart').getContext('2d');
new Chart(salesTrendCtx, {
type: 'line',
data: {
labels: ['10月', '11月', '12月', '1月', '2月', '3月'],
datasets: [{
label: '月度销量',
data: [245621, 258743, 267890, 252145, 230876, 286575],
borderColor: '#64b5f6',
backgroundColor: 'rgba(100, 181, 246, 0.1)',
tension: 0.3,
fill: true
}]
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
x: {
grid: {
color: '#1e3a5f'
},
ticks: {
color: '#90caf9'
}
},
y: {
grid: {
color: '#1e3a5f'
},
ticks: {
color: '#90caf9'
}
}
}
}
});
});
</script>
</body>
</html>
五、史上最强写作大模型 （claude-3-opus）
史上最强写作模型，最贵，逻辑性最严密的写作大模型claude-3-opus登场
简单易用（一句话写出一篇优质的文章）
要写篇文章，直接聊天要求就行。
提示词：
你好，帮我写个公众号文章，主题是"如何提高工作效率"。
AI味非常低，以AI乱真
不仅能模仿各种写作风格，还能根据你的要求调整语气。
提示词：
写一段正式的祝福语，长度 200个字左右。
输出的内容：
用户请求撰写一段正式的祝福语，要求长度约为200个字。以下是满足该要求的祝福语：
在这美好的时刻，我谨代表自己向您致以最诚挚的祝福。愿您在未来的日子里，生活幸福美满，事业蒸蒸日上。无论是在工作还是生活中，都能遇到志同道合的朋友，携手共进，共同创造美好的回忆。愿您的每一天都充满阳光与欢笑，每一个梦想都能逐渐成真。希望您在追求理想的道路上，能够勇往直前，克服一切困难，收获丰硕的成果。愿健康常伴，快乐常随，幸福与您相伴终生。让我们共同期待更加美好的明天，愿您的未来如星空般璀璨，充满无限可能。再次祝福您，愿一切顺利，心想事成！
提示词：
写一段幽默的祝福语，长度 200个字左右。
提示词：
写一段煽情的祝福语，长度 200个字左右。
输出的内容：
用户请求撰写一段幽默的祝福语，要求长度约为200个字。以下是满足该要求的祝福语：
在这个特别的日子里，我想祝你好运，愿你的人生就像一杯咖啡，浓郁而香醇，偶尔加点糖，甜蜜而不腻！希望你每天都能像调皮的小猫一样，享受生活中的每一个小惊喜，哪怕是摔了一跤也能笑着爬起来，继续前行。愿你的烦恼如同过期的牛奶，早早被丢弃，快乐则像无尽的薯片，越吃越上瘾！希望你在工作中能像超人一样，轻松应对各种挑战，而在休息时则能像懒猫一样，舒舒服服地享受每一刻。愿你的钱包越来越鼓，像气球一样飞起来；愿你的朋友们都像星星一样，闪闪发光，给你带来无尽的欢乐。记得，生活就像一场喜剧，笑声才是最好的配乐！祝你每天都能开怀大笑，幸福常伴！
提示词：
用鲁迅的语气，写一段祝福语，长度 200个字左右。
输出的内容：
用户请求用鲁迅的语气撰写一段祝福语，要求长度约为200个字。以下是满足该要求的祝福语：
在这纷繁复杂的世道中，愿你如同那坚韧的松树，扎根于大地，迎风而立。生活的苦涩，常常如同那难以言喻的药方，令人难以承受，但愿你能从中提炼出甘甜，化作前行的动力。愿你在追求理想的路上，能够不畏艰难，勇敢面对那些荆棘与坎坷。人世间的喧嚣，往往令人心生疲惫，但愿你能在繁华与冷漠之间，找到属于自己的那一片宁静。愿你身边的朋友，能如同那星星般闪烁，陪伴你走过每一个黑暗的夜晚。生活不易，愿你在每一个清晨都能怀抱希望，迎接新的挑战，愿你的未来如同那灿烂的阳光，洒满每一个角落，温暖你我。愿你在这条漫长的道路上，始终保持一颗热爱生活的心，勇敢追逐属于自己的光明。
提示词：
用周星驰的语气，写一段祝福语，长度 200个字左右。
输出的内容：
用户请求用周星驰的语气撰写一段祝福语，要求长度约为200个字。以下是满足该要求的祝福语：
嘿，朋友，今天可是个大日子啊！我祝你的人生就像一部喜剧，笑声不断，烦恼全都跑光光！愿你每天都能像吃到一碗热腾腾的云吞面一样，幸福满满，心里暖暖的。生活就像一场电影，有时搞笑，有时感人，但无论如何，记得要做自己的主角，别让那些配角抢了风头！希望你能在工作中，像我一样，时不时来点幽默，给大家带来欢乐；在生活中，能像个孩子一样，保持那份纯真与好奇，去探索每一个新奇的事物。愿你的朋友都像那颗闪亮的星星，陪伴你走过每一个夜晚，给你无尽的支持和欢笑。记得，人生苦短，开心最重要，别让烦恼占据了你的心！祝你每天都能开怀大笑，幸福快乐，像个大英雄一样，活出精彩人生！
难怪很多人用claude来写小说，写剧本。真的是写作神器助手。
六、Claude的适用场景
【场景1】软件开发与编程
最佳选择：Claude 3.7 Sonnet
- 代码生成错误率显著更低
- 调试能力更强，错误诊断更准确
- 处理大型代码库速度更快
【场景2】学术文献研究
最佳选择：Claude 3.7 Sonnet
- 文献综述更准确，错误率低25%
- 引用格式更规范，符合学术标准
- 对专业术语理解更精确
- 能处理更长的学术论文
【场景3】数据分析与可视化
最佳选择：Claude 3.7 Sonnet
- 数据处理代码准确性更高
- 统计分析解释更严谨
- 生成的可视化代码更可靠
- 数学计算错误率更低
【场景4】写小说，写剧本
最佳选择：claude-3-opus
- 语言风格自然流畅
- 情节和人物塑造能力强
- 适应多种写作风格
- 高效的上下文理解
- 支持多轮互动和反馈
七、感受
Claude 3.7 和 claude-3-opus 为不同领域的用户提供了强大而灵活的支持，无论是技术性工作还是创意写作，均能高效完成任务。无论是快速代码生成、精确的学术写作，还是高效的创意创作，它们都能够充分满足不同场景的需求，成为众多专业人士的得力助手。
好用的功能太多太多，我就不在这个一一列举了，有兴趣的可以自行尝试。
有提供免费的授权码可体验～
有提供免费的授权码可体验～
有提供免费的授权码可体验～
私信虚竹哥，获取体验码~
国内可直接使用~
我是虚竹哥，目标是带十万人玩转AI。
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
