Minimax M2.1 天气卡片前瞻测试！
LINUX DO - 最新话题 (光头不砍树)提示词：
你是 Apple Inc 的 UI 设计师，以 iOS 18 的设计风格做一个带有动画效果的天气卡片，要求是使用 HTML、CSS 和基础 JavaScript，使用横板天气页面（拥有 4 个天气卡片 (晴天，大风，暴雨，暴雪))。应足够美观，实现一定的交互效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 18 天气卡片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
overflow-x: hidden;
}
h1 {
color: #ffffff;
font-size: 32px;
font-weight: 600;
margin-bottom: 40px;
text-align: center;
letter-spacing: 0.5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.weather-container {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
max-width: 1400px;
width: 100%;
}
.weather-card {
width: 300px;
height: 420px;
border-radius: 28px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.weather-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.weather-card:active {
transform: scale(0.98);
}
/* 卡片背景渐变 */
.card-sunny {
background: linear-gradient(180deg, #5b9bd5 0%, #87ceeb 50%, #ffffff 100%);
}
.card-windy {
background: linear-gradient(180deg, #6c7a89 0%, #95a5a6 50%, #bdc3c7 100%);
}
.card-storm {
background: linear-gradient(180deg, #2c3e50 0%, #34495e 50%, #4a6572 100%);
}
.card-snow {
background: linear-gradient(180deg, #a8c0d4 0%, #d4e5f7 50%, #ffffff 100%);
}
/* 玻璃效果覆盖层 */
.glass-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1;
}
.card-content {
position: relative;
z-index: 2;
height: 100%;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.location {
display: flex;
align-items: center;
gap: 6px;
}
.location-icon {
width: 16px;
height: 16px;
}
.location-text {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.menu-icon {
width: 24px;
height: 24px;
opacity: 0.7;
}
.weather-main {
text-align: center;
margin: 20px 0;
}
.weather-icon {
width: 100px;
height: 100px;
margin-bottom: 16px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.temperature {
font-size: 72px;
font-weight: 200;
color: #ffffff;
line-height: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.temperature-unit {
font-size: 32px;
vertical-align: top;
}
.weather-condition {
font-size: 20px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin-top: 8px;
}
.weather-details {
display: flex;
justify-content: space-around;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.detail-item {
text-align: center;
}
.detail-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 4px;
}
.detail-value {
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
/* 动画元素容器 */
.animation-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
}
/* 晴天动画 */
.sun {
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, transparent 70%);
border-radius: 50%;
animation: sunPulse 4s ease-in-out infinite;
}
.sun::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, #fff9c4 0%, #ffd700 100%);
border-radius: 50%;
}
.sun-ray {
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
animation: sunRayRotate 20s linear infinite;
}
@keyframes sunPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.1); opacity: 1; }
}
@keyframes sunRayRotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 大风动画 */
.wind-lines {
position: absolute;
top: 20%;
left: -20%;
width: 150%;
height: 100%;
}
.wind-line {
position: absolute;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
border-radius: 3px;
animation: windBlow 3s ease-in-out infinite;
}
.wind-line:nth-child(1) { top: 0%; width: 80px; animation-delay: 0s; }
.wind-line:nth-child(2) { top: 30%; width: 120px; animation-delay: 0.5s; }
.wind-line:nth-child(3) { top: 60%; width: 60px; animation-delay: 1s; }
.wind-line:nth-child(4) { top: 90%; width: 100px; animation-delay: 1.5s; }
@keyframes windBlow {
0% { transform: translateX(-100px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(400px); opacity: 0; }
}
.cloud-windy {
position: absolute;
top: 10%;
left: 10%;
width: 80px;
height: 40px;
background: rgba(255, 255, 255, 0.8);
border-radius: 40px;
animation: cloudFloat 4s ease-in-out infinite;
}
.cloud-windy::before {
content: '';
position: absolute;
top: -20px;
left: 15px;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
@keyframes cloudFloat {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(20px) translateY(-10px); }
}
/* 暴雨动画 */
.rain-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.rain-drop {
position: absolute;
width: 2px;
height: 20px;
background: linear-gradient(transparent, rgba(174, 194, 224, 0.8));
border-radius: 2px;
animation: rainFall 1s linear infinite;
}
@keyframes rainFall {
0% { transform: translateY(-20px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(420px); opacity: 0; }
}
.lightning {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0);
animation: lightningFlash 4s ease-in-out infinite;
}
@keyframes lightningFlash {
0%, 90%, 100% { background: rgba(255, 255, 255, 0); }
92%, 94%, 96% { background: rgba(255, 255, 255, 0.3); }
93%, 95% { background: rgba(255, 255, 255, 0.6); }
}
/* 暴雪动画 */
.snow-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.snowflake {
position: absolute;
color: #ffffff;
font-size: 16px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
animation: snowFall 5s linear infinite;
}
@keyframes snowFall {
0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(420px) rotate(360deg); opacity: 0; }
}
/* 悬停详细信息 */
.card-hover-info {
position: absolute;
bottom: -100px;
left: 0;
right: 0;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
transition: bottom 0.3s ease;
z-index: 10;
}
.weather-card:hover .card-hover-info {
bottom: 0;
}
.hourly-forecast {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.hour-item {
text-align: center;
}
.hour-time {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 4px;
}
.hour-temp {
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
/* 响应式设计 */
@media (max-width: 1320px) {
.weather-container {
gap: 20px;
}
.weather-card {
width: 280px;
height: 400px;
}
}
@media (max-width: 600px) {
h1 {
font-size: 24px;
margin-bottom: 24px;
}
.weather-container {
flex-direction: column;
align-items: center;
}
.weather-card {
width: 100%;
max-width: 340px;
height: 380px;
}
}
/* 卡片进入动画 */
.weather-card {
opacity: 0;
transform: translateY(30px);
animation: cardEnter 0.6s ease forwards;
}
.weather-card:nth-child(1) { animation-delay: 0.1s; }
.weather-card:nth-child(2) { animation-delay: 0.2s; }
.weather-card:nth-child(3) { animation-delay: 0.3s; }
.weather-card:nth-child(4) { animation-delay: 0.4s; }
@keyframes cardEnter {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<h1>Weather Forecast</h1>
<div class="weather-container">
<!-- 晴天卡片 -->
<div class="weather-card card-sunny" onclick="selectCard(this, 'sunny')">
<div class="animation-container">
<div class="sun">
<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 class="glass-overlay"></div>
<div class="card-content">
<div class="card-header">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="white">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
<span class="location-text">Beijing</span>
</div>
<svg class="menu-icon" viewBox="0 0 24 24" fill="white">
<circle cx="12" cy="5" r="2"/>
<circle cx="12" cy="12" r="2"/>
<circle cx="12" cy="19" r="2"/>
</svg>
</div>
<div class="weather-main">
<svg class="weather-icon" viewBox="0 0 100 100">
<!-- 太阳图标 -->
<circle cx="50" cy="50" r="22" fill="#FFD700"/>
<g stroke="#FFD700" stroke-width="4" stroke-linecap="round">
<line x1="50" y1="15" x2="50" y2="25"/>
<line x1="50" y1="75" x2="50" y2="85"/>
<line x1="15" y1="50" x2="25" y2="50"/>
<line x1="75" y1="50" x2="85" y2="50"/>
<line x1="25.3" y1="25.3" x2="32.3" y2="32.3"/>
<line x1="67.7" y1="67.7" x2="74.7" y2="74.7"/>
<line x1="25.3" y1="74.7" x2="32.3" y2="67.7"/>
<line x1="67.7" y1="32.3" x2="74.7" y2="25.3"/>
</g>
</svg>
<div class="temperature">28<span class="temperature-unit">°</span></div>
<div class="weather-condition">Sunny</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-label">Humidity</div>
<div class="detail-value">45%</div>
</div>
<div class="detail-item">
<div class="detail-label">UV Index</div>
<div class="detail-value">High</div>
</div>
<div class="detail-item">
<div class="detail-label">Wind</div>
<div class="detail-value">3 km/h</div>
</div>
</div>
</div>
<div class="card-hover-info">
<div class="hourly-forecast">
<div class="hour-item">
<div class="hour-time">Now</div>
<div>☀️</div>
<div class="hour-temp">28°</div>
</div>
<div class="hour-item">
<div class="hour-time">1PM</div>
<div>☀️</div>
<div class="hour-temp">29°</div>
</div>
<div class="hour-item">
<div class="hour-time">2PM</div>
<div>⛅</div>
<div class="hour-temp">27°</div>
</div>
<div class="hour-item">
<div class="hour-time">3PM</div>
<div>☀️</div>
<div class="hour-temp">28°</div>
</div>
</div>
</div>
</div>
<!-- 大风卡片 -->
<div class="weather-card card-windy" onclick="selectCard(this, 'windy')">
<div class="animation-container">
<div class="cloud-windy"></div>
<div class="wind-lines">
<div class="wind-line"></div>
<div class="wind-line"></div>
<div class="wind-line"></div>
<div class="wind-line"></div>
</div>
</div>
<div class="glass-overlay"></div>
<div class="card-content">
<div class="card-header">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="white">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
<span class="location-text">Shanghai</span>
</div>
<svg class="menu-icon" viewBox="0 0 24 24" fill="white">
<circle cx="12" cy="5" r="2"/>
<circle cx="12" cy="12" r="2"/>
<circle cx="12" cy="19" r="2"/>
</svg>
</div>
<div class="weather-main">
<svg class="weather-icon" viewBox="0 0 100 100">
<!-- 风图标 -->
<g fill="none" stroke="white" stroke-width="4" stroke-linecap="round">
<path d="M20 35 Q35 30 45 35 Q55 40 65 35"/>
<path d="M10 50 Q30 45 50 50 Q65 55 80 50"/>
<path d="M15 65 Q35 60 55 65 Q70 70 85 65"/>
</g>
</svg>
<div class="temperature">18<span class="temperature-unit">°</span></div>
<div class="weather-condition">Windy</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-label">Humidity</div>
<div class="detail-value">62%</div>
</div>
<div class="detail-item">
<div class="detail-label">Wind Speed</div>
<div class="detail-value">35 km/h</div>
</div>
<div class="detail-item">
<div class="detail-label">Gusts</div>
<div class="detail-value">55 km/h</div>
</div>
</div>
</div>
<div class="card-hover-info">
<div class="hourly-forecast">
<div class="hour-item">
<div class="hour-time">Now</div>
<div>💨</div>
<div class="hour-temp">18°</div>
</div>
<div class="hour-item">
<div class="hour-time">1PM</div>
<div>💨</div>
<div class="hour-temp">19°</div>
</div>
<div class="hour-item">
<div class="hour-time">2PM</div>
<div>🌬️</div>
<div class="hour-temp">17°</div>
</div>
<div class="hour-item">
<div class="hour-time">3PM</div>
<div>💨</div>
<div class="hour-temp">18°</div>
</div>
</div>
</div>
</div>
<!-- 暴雨卡片 -->
<div class="weather-card card-storm" onclick="selectCard(this, 'storm')">
<div class="animation-container">
<div class="rain-container" id="rain-container"></div>
<div class="lightning"></div>
</div>
<div class="glass-overlay"></div>
<div class="card-content">
<div class="card-header">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="white">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
<span class="location-text">Guangzhou</span>
</div>
<svg class="menu-icon" viewBox="0 0 24 24" fill="white">
<circle cx="12" cy="5" r="2"/>
<circle cx="12" cy="12" r="2"/>
<circle cx="12" cy="19" r="2"/>
</svg>
</div>
<div class="weather-main">
<svg class="weather-icon" viewBox="0 0 100 100">
<!-- 雷暴图标 -->
<g>
<path d="M35 25 L50 50 L40 50 L55 75 L45 55 L55 55 L35 35 Z" fill="#FFD700"/>
<path d="M60 25 Q75 20 80 35 Q85 50 75 55" fill="rgba(255,255,255,0.5)"/>
<path d="M20 35 Q35 30 40 45 Q45 60 35 65" fill="rgba(255,255,255,0.5)"/>
</g>
</svg>
<div class="temperature">22<span class="temperature-unit">°</span></div>
<div class="weather-condition">Thunderstorm</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-label">Humidity</div>
<div class="detail-value">88%</div>
</div>
<div class="detail-item">
<div class="detail-label">Rainfall</div>
<div class="detail-value">45mm</div>
</div>
<div class="detail-item">
<div class="detail-label">Pressure</div>
<div class="detail-value">995 hPa</div>
</div>
</div>
</div>
<div class="card-hover-info">
<div class="hourly-forecast">
<div class="hour-item">
<div class="hour-time">Now</div>
<div>⛈️</div>
<div class="hour-temp">22°</div>
</div>
<div class="hour-item">
<div class="hour-time">1PM</div>
<div>🌧️</div>
<div class="hour-temp">21°</div>
</div>
<div class="hour-item">
<div class="hour-time">2PM</div>
<div>⛈️</div>
<div class="hour-temp">22°</div>
</div>
<div class="hour-item">
<div class="hour-time">3PM</div>
<div>🌦️</div>
<div class="hour-temp">23°</div>
</div>
</div>
</div>
</div>
<!-- 暴雪卡片 -->
<div class="weather-card card-snow" onclick="selectCard(this, 'snow')">
<div class="animation-container">
<div class="snow-container" id="snow-container"></div>
</div>
<div class="glass-overlay"></div>
<div class="card-content">
<div class="card-header">
<div class="location">
<svg class="location-icon" viewBox="0 0 24 24" fill="white">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
<span class="location-text">Harbin</span>
</div>
<svg class="menu-icon" viewBox="0 0 24 24" fill="white">
<circle cx="12" cy="5" r="2"/>
<circle cx="12" cy="12" r="2"/>
<circle cx="12" cy="19" r="2"/>
</svg>
</div>
<div class="weather-main">
<svg class="weather-icon" viewBox="0 0 100 100">
<!-- 雪花图标 -->
<g fill="white">
<circle cx="50" cy="50" r="8"/>
<line x1="50" y1="20" x2="50" y2="80" stroke="white" stroke-width="3"/>
<line x1="20" y1="50" x2="80" y2="50" stroke="white" stroke-width="3"/>
<line x1="28.8" y1="28.8" x2="71.2" y2="71.2" stroke="white" stroke-width="3"/>
<line x1="28.8" y1="71.2" x2="71.2" y2="28.8" stroke="white" stroke-width="3"/>
<circle cx="50" cy="20" r="3"/>
<circle cx="50" cy="80" r="3"/>
<circle cx="20" cy="50" r="3"/>
<circle cx="80" cy="50" r="3"/>
<circle cx="28.8" cy="28.8" r="3"/>
<circle cx="71.2" cy="71.2" r="3"/>
<circle cx="28.8" cy="71.2" r="3"/>
<circle cx="71.2" cy="28.8" r="3"/>
</g>
</svg>
<div class="temperature">-8<span class="temperature-unit">°</span></div>
<div class="weather-condition">Heavy Snow</div>
</div>
<div class="weather-details">
<div class="detail-item">
<div class="detail-label">Humidity</div>
<div class="detail-value">75%</div>
</div>
<div class="detail-item">
<div class="detail-label">Snow Depth</div>
<div class="detail-value">25 cm</div>
</div>
<div class="detail-item">
<div class="detail-label">Wind</div>
<div class="detail-value">20 km/h</div>
</div>
</div>
</div>
<div class="card-hover-info">
<div class="hourly-forecast">
<div class="hour-item">
<div class="hour-time">Now</div>
<div>❄️</div>
<div class="hour-temp">-8°</div>
</div>
<div class="hour-item">
<div class="hour-time">1PM</div>
<div>🌨️</div>
<div class="hour-temp">-7°</div>
</div>
<div class="hour-item">
<div class="hour-time">2PM</div>
<div>❄️</div>
<div class="hour-temp">-9°</div>
</div>
<div class="hour-item">
<div class="hour-time">3PM</div>
<div>🌨️</div>
<div class="hour-temp">-8°</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 生成雨滴
function createRain() {
const container = document.getElementById('rain-container');
if (!container) return;
for (let i = 0; i < 50; i++) {
const drop = document.createElement('div');
drop.className = 'rain-drop';
drop.style.left = Math.random() * 100 + '%';
drop.style.animationDelay = Math.random() * 2 + 's';
drop.style.animationDuration = (Math.random() * 0.5 + 0.5) + 's';
container.appendChild(drop);
}
}
// 生成雪花
function createSnowflakes() {
const container = document.getElementById('snow-container');
if (!container) return;
const snowflakeChars = ['❄', '❅', '❆', '✦', '✧'];
for (let i = 0; i < 60; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.fontSize = (Math.random() * 12 + 8) + 'px';
snowflake.style.animationDelay = Math.random() * 5 + 's';
snowflake.style.animationDuration = (Math.random() * 3 + 3) + 's';
container.appendChild(snowflake);
}
}
// 卡片选择交互
function selectCard(card, weatherType) {
// 移除其他卡片的选中状态
document.querySelectorAll('.weather-card').forEach(c => {
c.style.transform = 'scale(1)';
c.style.boxShadow = '0 10px 40px rgba(0, 0, 0, 0.3)';
});
// 添加点击效果
card.style.transform = 'scale(0.95)';
// 显示详细天气信息
showWeatherDetails(weatherType);
// 1.5秒后恢复
setTimeout(() => {
card.style.transform = 'scale(1)';
}, 1500);
}
// 显示天气详情（模拟弹窗）
function showWeatherDetails(weatherType) {
const details = {
sunny: {
title: 'Sunny',
desc: 'Perfect weather for outdoor activities. UV index is high, don\'t forget sunscreen!',
color: '#FFD700'
},
windy: {
title: 'Windy',
desc: 'Strong winds expected. Secure loose objects and use caution when driving.',
color: '#A0A0A0'
},
storm: {
title: 'Thunderstorm',
desc: 'Heavy rain and thunderstorms. Stay indoors and avoid open areas.',
color: '#5D6D7E'
},
snow: {
title: 'Heavy Snow',
desc: 'Severe winter conditions. Drive carefully and keep warm.',
color: '#AED6F1'
}
};
const info = details[weatherType];
// 创建详情弹窗
const popup = document.createElement('div');
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 30px;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
z-index: 1000;
text-align: center;
opacity: 0;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-width: 320px;
`;
popup.innerHTML = `
<h2 >${info.title}</h2>
<p >${info.desc}</p>
<button onclick="this.parentElement.remove()" >Close</button>
`;
document.body.appendChild(popup);
// 显示弹窗
setTimeout(() => {
popup.style.opacity = '1';
popup.style.transform = 'translate(-50%, -50%) scale(1)';
}, 10);
// 点击按钮关闭
popup.querySelector('button').addEventListener('click', () => {
popup.style.opacity = '0';
popup.style.transform = 'translate(-50%, -50%) scale(0.8)';
setTimeout(() => popup.remove(), 300);
});
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', () => {
createRain();
createSnowflakes();
// 添加卡片悬停音效效果（可选）
document.querySelectorAll('.weather-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transition = 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
});
});
});
</script>
</body>
</html>
作为对比：
qwen3 max：
ds 3.2：
9 posts - 6 participants
Generated by RSStT. The copyright belongs to the original author.