Claude Sonnet 3.7尝试，Coding 能力很强
总结能力如下：
最近很流行的天气卡片效果
提示词如下：
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>
* {
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>版权属于：Monster_4y
本文链接：https://blog.zmonster.top/132.html
转载时须注明出处及本声明
