提供如下内容给ai：
你是一位就职于苹果公司的顶级前端工程师。请创建一个包含 CSS 和 JavaScript 的 HTML 文件，用于生成动画天气卡片。
卡片需要以不同动画效果直观展示以下天气状况：
风力（如：飘动的云朵、摇曳的树木或风线）
降雨（如：下落的雨滴、形成的水洼）
晴天（如：闪耀的光线、明亮的背景）
下雪（如：飘落的雪花、积雪效果）
所有天气卡片需要并排显示，背景采用深色设计。
所有 HTML、CSS 和 JavaScript 代码都需包含在这个单一文件中。
JavaScript 部分需包含切换不同天气状态的功能（例如通过函数或按钮组），以演示每种天气的动画效果。
将前端显示效果优化得更精致流畅，打造出价值 2000 元 / 月的精品天气应用既视感。
你是 Apple Inc 的 UI 设计师，以 iOS 18 的设计风格做一个带有动画效果的天气卡片，要求是使用 HTML、CSS 和基础 JavaScript，使用横板天气页面（拥有 4 个天气卡片 (晴天，大风，暴雨，暴雪))。应足够美观，实现一定的交互效果。
编写 单个HTML页面（所有的js以及css都放到这个html页面中），创建一个横板天气页面，拥有 4 个天气卡片 (晴天，大风，暴雨，暴雪), 卡片带有华丽的外观，优雅的动画 / 动效，通过动态的元素给用户沉浸式的体验，巧妙利用阴影，hover, blur 等技巧提升视觉冲击，为得到更好的 UX, 你可以自由发挥。
你是一位就职于苹果公司的顶级前端工程师。请创建一个包含CSS和JavaScript的HTML文件，用于生成动画天气卡片。卡片需要以不同动画效果直观展示以下天气状况：
风力（如：飘动的云朵、摇曳的树木或风线）
降雨（如：下落的雨滴、形成的水洼）
晴天（如：闪耀的光线、明亮的背景）
下雪（如：飘落的雪花、积雪效果）
所有天气卡片需要并排显示，背景采用深色设计。所有HTML、CSS和JavaScript代码都需包含在这个单一文件中。JavaScript部分需包含切换不同天气状态的功能（例如通过函数或按钮组），以演示每种天气的动画效果。
将前端显示效果优化得更精致流畅，打造出价值20元/月的精品天气应用既视感。
嘿! 画面有些单调，试着为它添加一些点缀元素或者优雅的文字点缀? 发动你的脑筋!
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>
body {
font-family: 'Arial', sans-serif;
background-color: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1200px;
}
.weather-card {
position: relative;
width: 250px;
height: 350px;
background: linear-gradient(to bottom, #2a2a4a, #16162c);
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
overflow: hidden;
transition: transform 0.3s ease;
}
.weather-card:hover {
transform: translateY(-10px);
}
.card-content {
position: relative;
z-index: 2;
padding: 20px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weather-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.weather-temp {
font-size: 48px;
font-weight: bold;
text-align: center;
margin: 20px 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.weather-details {
margin-top: auto;
text-align: center;
font-size: 14px;
color: #cccccc;
}
/* Wind Animation */
.wind-card .animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
animation: windCloud linear infinite;
}
.wind-line {
position: absolute;
height: 2px;
background: rgba(255, 255, 255, 0.3);
animation: windLine linear infinite;
}
@keyframes windCloud {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(350px);
}
}
@keyframes windLine {
0% {
transform: translateX(-50px) scaleX(0);
opacity: 0;
}
20% {
transform: translateX(0) scaleX(1);
opacity: 1;
}
80% {
transform: translateX(200px) scaleX(1);
opacity: 1;
}
100% {
transform: translateX(250px) scaleX(0);
opacity: 0;
}
}
/* Rain Animation */
.rain-card .animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.raindrop {
position: absolute;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
animation: rain linear infinite;
}
.puddle {
position: absolute;
bottom: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: scaleX(2) scaleY(0.5);
animation: puddle 3s ease-in-out infinite;
}
@keyframes rain {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(400px);
}
}
@keyframes puddle {
0%, 100% {
transform: scaleX(2) scaleY(0.5);
opacity: 0.2;
}
50% {
transform: scaleX(2.2) scaleY(0.55);
opacity: 0.3;
}
}
/* Sun Animation */
.sun-card .animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to bottom, #ff9966, #2a2a4a);
}
.sun {
position: absolute;
width: 80px;
height: 80px;
background: #ffdd00;
border-radius: 50%;
box-shadow: 0 0 50px #ffdd00;
top: 50px;
left: 50%;
transform: translateX(-50%);
animation: sunPulse 3s ease-in-out infinite;
}
.sun-ray {
position: absolute;
background: linear-gradient(to bottom, rgba(255, 221, 0, 0.7), rgba(255, 221, 0, 0));
transform-origin: top;
animation: sunRay 3s ease-in-out infinite;
}
@keyframes sunPulse {
0%, 100% {
box-shadow: 0 0 50px #ffdd00;
transform: translateX(-50%) scale(1);
}
50% {
box-shadow: 0 0 70px #ffdd00;
transform: translateX(-50%) scale(1.05);
}
}
@keyframes sunRay {
0%, 100% {
opacity: 0.5;
transform: scaleY(1);
}
50% {
opacity: 0.7;
transform: scaleY(1.1);
}
}
/* Snow Animation */
.snow-card .animation-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(to bottom, #2a2a4a, #16162c);
}
.snowflake {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: snow linear infinite;
}
.snow-ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
transform: scaleX(1.2);
}
@keyframes snow {
0% {
transform: translateY(-50px) rotate(0deg);
}
100% {
transform: translateY(400px) rotate(360deg);
}
}
/* Controls */
.controls {
display: none;
}
</style>
</head>
<body>
<div class="container">
<!-- Wind Card -->
<div class="weather-card wind-card">
<div class="animation-container" id="wind-animation">
<!-- Wind animations will be added here by JS -->
</div>
<div class="card-content">
<div class="weather-title">Windy</div>
<div class="weather-temp">18°C</div>
<div class="weather-details">
<p>Wind: 25 km/h</p>
<p>Humidity: 45%</p>
<p>Pressure: 1012 hPa</p>
</div>
</div>
</div>
<!-- Rain Card -->
<div class="weather-card rain-card">
<div class="animation-container" id="rain-animation">
<!-- Rain animations will be added here by JS -->
</div>
<div class="card-content">
<div class="weather-title">Rainy</div>
<div class="weather-temp">14°C</div>
<div class="weather-details">
<p>Precipitation: 80%</p>
<p>Humidity: 85%</p>
<p>Pressure: 1008 hPa</p>
</div>
</div>
</div>
<!-- Sun Card -->
<div class="weather-card sun-card">
<div class="animation-container" id="sun-animation">
<!-- Sun animations will be added here by JS -->
</div>
<div class="card-content">
<div class="weather-title">Sunny</div>
<div class="weather-temp">28°C</div>
<div class="weather-details">
<p>UV Index: High</p>
<p>Humidity: 30%</p>
<p>Pressure: 1015 hPa</p>
</div>
</div>
</div>
<!-- Snow Card -->
<div class="weather-card snow-card">
<div class="animation-container" id="snow-animation">
<!-- Snow animations will be added here by JS -->
</div>
<div class="card-content">
<div class="weather-title">Snowy</div>
<div class="weather-temp">-5°C</div>
<div class="weather-details">
<p>Snowfall: 5 cm</p>
<p>Humidity: 70%</p>
<p>Pressure: 1020 hPa</p>
</div>
</div>
</div>
</div>
<script>
// Wind Animation
function createWindAnimation() {
const container = document.getElementById('wind-animation');
container.innerHTML = '';
// Create clouds
for (let i = 0; i < 5; i++) {
const cloud = document.createElement('div');
cloud.className = 'cloud';
const size = Math.random() * 50 + 30;
const top = Math.random() * 300;
const opacity = Math.random() * 0.5 + 0.2;
const duration = Math.random() * 10 + 15;
const delay = Math.random() * 5;
cloud.style.width = `${size}px`;
cloud.style.height = `${size / 2}px`;
cloud.style.top = `${top}px`;
cloud.style.opacity = opacity;
cloud.style.animationDuration = `${duration}s`;
cloud.style.animationDelay = `${delay}s`;
container.appendChild(cloud);
}
// Create wind lines
for (let i = 0; i < 15; i++) {
const windLine = document.createElement('div');
windLine.className = 'wind-line';
const width = Math.random() * 50 + 30;
const top = Math.random() * 350;
const duration = Math.random() * 2 + 1;
const delay = Math.random() * 3;
windLine.style.width = `${width}px`;
windLine.style.top = `${top}px`;
windLine.style.animationDuration = `${duration}s`;
windLine.style.animationDelay = `${delay}s`;
container.appendChild(windLine);
}
}
// Rain Animation
function createRainAnimation() {
const container = document.getElementById('rain-animation');
container.innerHTML = '';
// Create raindrops
for (let i = 0; i < 80; i++) {
const raindrop = document.createElement('div');
raindrop.className = 'raindrop';
const height = Math.random() * 20 + 10;
const left = Math.random() * 250;
const duration = Math.random() * 1 + 0.5;
const delay = Math.random() * 2;
const opacity = Math.random() * 0.7 + 0.3;
raindrop.style.height = `${height}px`;
raindrop.style.left = `${left}px`;
raindrop.style.opacity = opacity;
raindrop.style.animationDuration = `${duration}s`;
raindrop.style.animationDelay = `${delay}s`;
container.appendChild(raindrop);
}
// Create puddles
for (let i = 0; i < 5; i++) {
const puddle = document.createElement('div');
puddle.className = 'puddle';
const size = Math.random() * 30 + 20;
const left = Math.random() * 200 + 25;
const delay = Math.random() * 2;
puddle.style.width = `${size}px`;
puddle.style.height = `${size / 4}px`;
puddle.style.left = `${left}px`;
puddle.style.animationDelay = `${delay}s`;
container.appendChild(puddle);
}
}
// Sun Animation
function createSunAnimation() {
const container = document.getElementById('sun-animation');
container.innerHTML = '';
// Create sun
const sun = document.createElement('div');
sun.className = 'sun';
container.appendChild(sun);
// Create sun rays
for (let i = 0; i < 8; i++) {
const ray = document.createElement('div');
ray.className = 'sun-ray';
const angle = (i * 45) * (Math.PI / 180);
const length = 100;
const width = 10;
ray.style.width = `${width}px`;
ray.style.height = `${length}px`;
ray.style.top = `${90}px`;
ray.style.left = `${125 - (width / 2)}px`;
ray.style.transform = `rotate(${i * 45}deg) translateY(-${length / 2}px)`;
ray.style.transformOrigin = `${width / 2}px ${length}px`;
ray.style.animationDelay = `${i * 0.2}s`;
container.appendChild(ray);
}
}
// Snow Animation
function createSnowAnimation() {
const container = document.getElementById('snow-animation');
container.innerHTML = '';
// Create snowflakes
for (let i = 0; i < 60; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
const size = Math.random() * 5 + 2;
const left = Math.random() * 250;
const duration = Math.random() * 10 + 5;
const delay = Math.random() * 5;
snowflake.style.width = `${size}px`;
snowflake.style.height = `${size}px`;
snowflake.style.left = `${left}px`;
snowflake.style.animationDuration = `${duration}s`;
snowflake.style.animationDelay = `${delay}s`;
container.appendChild(snowflake);
}
// Create snow ground
const ground = document.createElement('div');
ground.className = 'snow-ground';
container.appendChild(ground);
}
// Initialize all animations
function initAnimations() {
createWindAnimation();
createRainAnimation();
createSunAnimation();
createSnowAnimation();
}
// Start animations when page loads
window.onload = initAnimations;
</script>
</body>
</html>
💬 评论