console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>琉璃光影 · 天气诗篇</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', 'Poppins', sans-serif;
position: relative;
overflow-x: hidden;
}
body::before, body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
body::before {
background: radial-gradient(ellipse at top left, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at bottom right, rgba(75, 0, 130, 0.2) 0%, transparent 50%);
animation: aurora-shimmer 20s infinite linear alternate;
}
body::after {
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
opacity: 0.5;
animation: subtle-pulse 15s infinite ease-in-out;
}
@keyframes aurora-shimmer {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
25% { transform: translate(5vw, -5vh) rotate(5deg); }
50% { transform: translate(-5vw, 5vh) rotate(-5deg); opacity: 0.9; }
75% { transform: translate(3vw, 3vh) rotate(3deg); }
100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
}
@keyframes subtle-pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
.floating-blob {
position: fixed;
border-radius: 50%;
opacity: 0.08;
filter: blur(40px);
pointer-events: none;
z-index: -1;
animation: float 25s infinite ease-in-out alternate;
}
.blob-1 { background-color: #7E22CE; width: 300px; height: 300px; top: 10vh; left: 10vw; animation-delay: 0s; }
.blob-2 { background-color: #4F46E5; width: 250px; height: 250px; top: 60vh; left: 70vw; animation-delay: -5s; }
.blob-3 { background-color: #DB2777; width: 200px; height: 200px; top: 30vh; left: 80vw; animation-delay: -10s; }
.blob-4 { background-color: #10B981; width: 280px; height: 280px; top: 70vh; left: 5vw; animation-delay: -15s;}
@keyframes float {
0% { transform: translateY(20px) translateX(0px) scale(1); }
100% { transform: translateY(-20px) translateX(15px) scale(1.1); }
}
@keyframes pulsate {
0%, 100% { transform: scale(1); box-shadow: 0 0 15px 5px rgba(255, 223, 186, 0.7); }
50% { transform: scale(1.1); box-shadow: 0 0 25px 10px rgba(255, 223, 186, 1); }
}
.sun-glow { animation: pulsate 3s infinite ease-in-out; }
@keyframes wind-streak {
0% { transform: translateX(-150%) skewX(-30deg); opacity: 0; }
20% { opacity: 0.7; }
80% { opacity: 0.7; }
100% { transform: translateX(150%) skewX(-30deg); opacity: 0; }
}
.wind-line { position: absolute; height: 2px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; animation-name: wind-streak; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes rain-fall {
0% { transform: translateY(-100px) scaleY(1); opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { transform: translateY(calc(100% + 100px)) scaleY(1.5); opacity: 0; }
}
.raindrop { position: absolute; width: 2px; height: 20px; background: linear-gradient(to bottom, rgba(173, 216, 230, 0), rgba(173, 216, 230, 0.8)); border-radius: 1px; animation-name: rain-fall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes snow-fall {
0% { transform: translateY(-50px) translateX(0px) rotate(0deg); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(100%) translateX(20px) rotate(360deg); opacity: 0; }
}
@keyframes snow-fall-alt {
0% { transform: translateY(-50px) translateX(0px) rotate(0deg); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(100%) translateX(-20px) rotate(-360deg); opacity: 0; }
}
.snowflake { position: absolute; color: white; font-size: 1.25rem; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
.text-shadow-strong { text-shadow: 0px 1px 3px rgba(0,0,0,0.5); }
.text-shadow-light { text-shadow: 0px 1px 2px rgba(0,0,0,0.2); }
.card-content-hover-effect > * { transition: transform 0.3s ease-out, text-shadow 0.3s ease-out; }
.group:hover .card-content-hover-effect > .temperature { transform: scale(1.05); text-shadow: 0px 2px 10px rgba(255,255,255,0.3); }
.group:hover .card-content-hover-effect > .condition { transform: translateY(-2px); }
.group:hover .weather-icon { transform: scale(1.1) rotate(5deg); }
.poetic-text {
font-family: 'Kaiti', 'STKaiti', serif;
font-size: 0.8rem;
line-height: 1.4;
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
.group:hover .poetic-text {
opacity: 0.9;
}
.page-title {
font-family: 'Long Cang', 'Ma Shan Zheng', cursive, 'Poppins';
background: linear-gradient(120deg, #fcc5e4 0%, #fda34b 15%, #ffd1ff 30%, #90f5d6 50%, #90f5d6 70%, #84d2ff 85%, #a6c1ee 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.05em;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.weather-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease-out;
pointer-events: none;
}
.group:hover .weather-card::before {
opacity: 1;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Poppins:wght@300;400;600;700&family=Long+Cang&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&display=swap" rel="stylesheet">
</head>
<body class="bg-slate-900 min-h-screen flex flex-col items-center justify-center p-4 sm:p-8 font-[Poppins]">
<div class="floating-blob blob-1"></div>
<div class="floating-blob blob-2"></div>
<div class="floating-blob blob-3"></div>
<div class="floating-blob blob-4"></div>
<header class="my-8 sm:my-12 text-center">
<h1 class="page-title text-4xl sm:text-5xl md:text-6xl font-bold">
琉璃光影 · 天气诗篇
</h1>
<p class="text-slate-400 mt-3 text-sm sm:text-base">感受四时变幻，品味自然之美</p>
</header>
<div class="flex space-x-4 sm:space-x-6 py-6 sm:py-10 overflow-x-auto w-full max-w-7xl justify-center items-center">
<div class="group weather-card relative w-64 h-96 sm:w-72 sm:h-[450px] bg-gradient-to-br from-orange-400 via-yellow-400 to-amber-500 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_-10px_rgba(251,191,36,0.5)] p-6 flex flex-col justify-between">
<div class="absolute top-10 left-1/2 -translate-x-1/2 w-24 h-24 bg-yellow-300 rounded-full sun-glow opacity-80 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-5 left-5 w-1 h-1 bg-white rounded-full opacity-70 animate-ping delay-100"></div>
<div class="absolute top-1/4 right-10 w-1.5 h-1.5 bg-white rounded-full opacity-70 animate-ping delay-300"></div>
<div class="absolute bottom-10 left-1/3 w-1 h-1 bg-white rounded-full opacity-70 animate-ping delay-500"></div>
</div>
<div class="z-10 card-content-hover-effect">
<svg xmlns="http://www.w3.org/2000/svg" class="weather-icon h-16 w-16 text-white opacity-80 mb-3 group-hover:opacity-100 group-hover:fill-yellow-200 transition-all duration-300" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3.75a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0112 3.75zM6.75 6a.75.75 0 00-.53.22L4.97 7.47a.75.75 0 001.06 1.06l1.25-1.25A.75.75 0 006.75 6zm11.72-.22a.75.75 0 00-1.06 1.06l1.25 1.25a.75.75 0 101.06-1.06l-1.25-1.25a.75.75 0 00-.53-.22zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zM3.75 12a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zm15 0a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM7.47 19.03a.75.75 0 00-1.06-1.06l-1.25 1.25a.75.75 0 101.06 1.06l1.25-1.25a.75.75 0 000-1.06zm9.31-1.06a.75.75 0 00-1.06 1.06l1.25 1.25a.75.75 0 101.06-1.06l-1.25-1.25zM12 18a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0112 18z"/>
</svg>
<p class="text-5xl font-bold text-white text-shadow-strong temperature">28°C</p>
<p class="text-xl text-white/90 mt-1 text-shadow-light condition">晴朗</p>
</div>
<div class="z-10 mt-auto">
<p class="poetic-text text-white/80 text-shadow-light mb-2">金乌轮转，光耀大地，<br>暖风拂面，万物向荣。</p>
<div class="text-right">
<p class="text-sm text-white/80 text-shadow-light">北京</p>
<p class="text-xs text-white/70 text-shadow-light">2023-10-27</p>
</div>
</div>
</div>
<div class="group weather-card relative w-64 h-96 sm:w-72 sm:h-[450px] bg-gradient-to-br from-sky-400 via-cyan-500 to-teal-600 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_-10px_rgba(22,163,74,0.4)] p-6 flex flex-col justify-between">
<div class="absolute inset-0 pointer-events-none">
<div class="wind-line" style="top: 20%; width: 80px; animation-duration: 2s; animation-delay: 0s;"></div>
<div class="wind-line" style="top: 40%; width: 100px; animation-duration: 2.5s; animation-delay: 0.5s;"></div>
<div class="wind-line" style="top: 60%; width: 70px; animation-duration: 1.8s; animation-delay: 1s; background: rgba(255,255,255,0.3);"></div>
<div class="wind-line" style="top: 75%; width: 120px; animation-duration: 3s; animation-delay: 0.2s;"></div>
</div>
<div class="z-10 card-content-hover-effect">
<svg xmlns="http://www.w3.org/2000/svg" class="weather-icon h-16 w-16 text-white opacity-80 mb-3 group-hover:opacity-100 transition-all duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"/>
</svg>
<p class="text-5xl font-bold text-white text-shadow-strong temperature">15°C</p>
<p class="text-xl text-white/90 mt-1 text-shadow-light condition">大风</p>
</div>
<div class="z-10 mt-auto">
<p class="poetic-text text-white/80 text-shadow-light mb-2">长风万里，呼啸而过，<br>云卷云舒，气象万千。</p>
<div class="text-right">
<p class="text-sm text-white/80 text-shadow-light">上海</p>
<p class="text-xs text-white/70 text-shadow-light">2023-10-27</p>
</div>
</div>
</div>
<div class="group weather-card relative w-64 h-96 sm:w-72 sm:h-[450px] bg-gradient-to-br from-slate-600 via-gray-700 to-slate-800 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_-10px_rgba(51,65,85,0.5)] p-6 flex flex-col justify-between">
<div class="absolute inset-0 pointer-events-none h-full">
<div class="raindrop" style="left: 10%; animation-duration: 0.8s; animation-delay: 0s; height: 25px;"></div>
<div class="raindrop" style="left: 20%; animation-duration: 0.7s; animation-delay: 0.3s; height: 30px;"></div>
<div class="raindrop" style="left: 30%; animation-duration: 0.9s; animation-delay: 0.1s; height: 20px; background: linear-gradient(to bottom, rgba(173, 216, 230, 0), rgba(173, 216, 230, 0.6));"></div>
<div class="raindrop" style="left: 45%; animation-duration: 0.6s; animation-delay: 0.5s; height: 35px;"></div>
<div class="raindrop" style="left: 60%; animation-duration: 0.85s; animation-delay: 0.2s; height: 28px;"></div>
<div class="raindrop" style="left: 75%; animation-duration: 0.75s; animation-delay: 0.6s; height: 22px;"></div>
<div class="raindrop" style="left: 90%; animation-duration: 0.65s; animation-delay: 0.4s; height: 32px; background: linear-gradient(to bottom, rgba(173, 216, 230, 0), rgba(173, 216, 230, 0.7));"></div>
</div>
<div class="absolute inset-0 bg-black/10 backdrop-blur-sm group-hover:bg-black/5 transition-all duration-300"></div>
<div class="z-10 card-content-hover-effect">
<svg xmlns="http://www.w3.org/2000/svg" class="weather-icon h-16 w-16 text-white opacity-80 mb-3 group-hover:opacity-100 transition-all duration-300" viewBox="0 0 24 24" fill="currentColor">
<path d="M14.25 4.967c.296-.37.236-.889-.134-1.185s-.889-.236-1.185.134l-5.25 6.562a.751.751 0 00.083 1.05l4.5 3.75a.75.75 0 001.133-.975l-3.23-2.692 4.033-5.043zm-8.432.82a.75.75 0 00-1.186.135L.6 12.484a.75.75 0 00.975 1.133L5.07 9.46l3.517 4.396a.75.75 0 001.133-.974L5.818 5.787zM12 15.75a.75.75 0 01.75.75v6a.75.75 0 01-1.5 0v-6a.75.75 0 01.75-.75zm-4.5 1.5a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75zm9 0a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3a.75.75 0 01.75-.75z"/>
</svg>
<p class="text-5xl font-bold text-white text-shadow-strong temperature">8°C</p>
<p class="text-xl text-white/90 mt-1 text-shadow-light condition">暴雨</p>
</div>
<div class="z-10 mt-auto">
<p class="poetic-text text-white/80 text-shadow-light mb-2">天街雨ज़्如酥，润物细无声。<br>倾盆涤尘埃，清新满乾坤。</p>
<div class="text-right">
<p class="text-sm text-white/80 text-shadow-light">广州</p>
<p class="text-xs text-white/70 text-shadow-light">2023-10-27</p>
</div>
</div>
</div>
<div class="group weather-card relative w-64 h-96 sm:w-72 sm:h-[450px] bg-gradient-to-br from-sky-200 via-slate-200 to-blue-200 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-[0_20px_50px_-10px_rgba(186,230,253,0.7)] p-6 flex flex-col justify-between">
<div class="absolute inset-0 pointer-events-none h-full">
<div class="snowflake" style="left: 10%; animation-name: snow-fall; animation-duration: 5s; animation-delay: 0s; font-size: 1.5rem;">❄</div>
<div class="snowflake" style="left: 20%; animation-name: snow-fall-alt; animation-duration: 6s; animation-delay: 1s; font-size: 1rem;">❅</div>
<div class="snowflake" style="left: 30%; animation-name: snow-fall; animation-duration: 4s; animation-delay: 0.5s; font-size: 1.75rem;">❄</div>
<div class="snowflake" style="left: 45%; animation-name: snow-fall-alt; animation-duration: 7s; animation-delay: 2s; font-size: 0.8rem;">❆</div>
<div class="snowflake" style="left: 60%; animation-name: snow-fall; animation-duration: 5.5s; animation-delay: 1.5s; font-size: 1.6rem;">❄</div>
<div class="snowflake" style="left: 75%; animation-name: snow-fall-alt; animation-duration: 6.5s; animation-delay: 0.2s; font-size: 1.1rem;">❅</div>
<div class="snowflake" style="left: 90%; animation-name: snow-fall; animation-duration: 4.5s; animation-delay: 2.5s; font-size: 1.4rem;">❆</div>
<div class="snowflake" style="left: 50%; animation-name: snow-fall-alt; animation-duration: 8s; animation-delay: 3s; font-size: 0.9rem;">❄</div>
</div>
<div class="absolute inset-0 bg-white/10 backdrop-blur-sm group-hover:bg-white/5 transition-all duration-300"></div>
<div class="z-10 card-content-hover-effect">
<svg xmlns="http://www.w3.org/2000/svg" class="weather-icon h-16 w-16 text-blue-700 opacity-80 mb-3 group-hover:opacity-100 transition-all duration-500" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12.586 2.586a2 2 0 00-2.828 0L6.343 5.025a2 2 0 000 2.828L8.78 10.293a2 2 0 002.828 0l2.44-2.44a2 2 0 000-2.828L11.172 2.157a2.018 2.018 0 00-.586-.429zm5.071 5.071a2 2 0 00-2.828 0L12.414 10.07a2 2 0 000 2.828l2.44 2.44a2 2 0 002.828 0l2.44-2.44a2 2 0 000-2.828l-2.828-2.829zm-10.142 0a2 2 0 00-2.828 0L2.27 10.07a2 2 0 000 2.828l2.44 2.44a2 2 0 002.828 0l2.44-2.44a2 2 0 000-2.828L7.515 7.657zM12.586 12.586a2 2 0 00-2.828 0L6.343 15.025a2 2 0 000 2.828L8.78 20.293a2 2 0 002.828 0l2.44-2.44a2 2 0 000-2.828l-2.828-2.829z" clip-rule="evenodd" />
</svg>
<p class="text-5xl font-bold text-slate-700 text-shadow-light temperature">-5°C</p>
<p class="text-xl text-slate-600/90 mt-1 text-shadow-light condition">暴雪</p>
</div>
<div class="z-10 mt-auto">
<p class="poetic-text text-slate-600/80 text-shadow-light mb-2">千山鸟飞绝，万径人踪灭。<br>琼花漫天舞，银装素裹界。</p>
<div class="text-right">
<p class="text-sm text-slate-600/80 text-shadow-light">哈尔滨</p>
<p class="text-xs text-slate-500/70 text-shadow-light">2023-10-27</p>
</div>
</div>
</div>
</div>
</body>
</html>