代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Weather App</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--bg-dark: #0a0e17;
--card-bg: rgba(18, 25, 40, 0.8);
--card-border: rgba(255, 255, 255, 0.1);
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.6);
--accent-color: #4d8eff;
--wind-color: #6bd2ff;
--rain-color: #5eb0ff;
--sun-color: #ffb74d;
--snow-color: #a5d8ff;
--glow-intensity: 0.6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--bg-dark);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
overflow-x: hidden;
}
.header {
text-align: center;
margin-bottom: 3rem;
width: 100%;
max-width: 800px;
}
.app-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
background: linear-gradient(90deg, #4d8eff, #6bd2ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.5px;
}
.app-subtitle {
font-size: 1rem;
font-weight: 400;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.premium-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, rgba(77, 142, 255, 0.2), rgba(107, 210, 255, 0.2));
border: 1px solid rgba(107, 210, 255, 0.3);
color: var(--wind-color);
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
backdrop-filter: blur(5px);
margin-top: 1rem;
}
.weather-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
width: 100%;
max-width: 1200px;
perspective: 1000px;
}
.weather-card {
width: 260px;
height: 380px;
background: var(--card-bg);
border-radius: 20px;
border: 1px solid var(--card-border);
position: relative;
overflow: hidden;
padding: 1.5rem;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.1, 1);
backdrop-filter: blur(10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transform-style: preserve-3d;
}
.weather-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0));
}
.weather-card:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.weather-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.weather-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
z-index: 2;
display: flex;
align-items: center;
}
.weather-icon {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.weather-desc {
font-size: 0.9rem;
font-weight: 400;
color: var(--text-secondary);
margin-bottom: 1.5rem;
z-index: 2;
}
.weather-temp {
font-size: 3rem;
font-weight: 300;
margin-top: auto;
margin-bottom: 0.5rem;
z-index: 2;
display: flex;
align-items: flex-start;
}
.temp-unit {
font-size: 1.5rem;
opacity: 0.7;
margin-left: 0.2rem;
}
.weather-details {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-secondary);
z-index: 2;
}
.detail-item {
display: flex;
align-items: center;
}
.detail-icon {
margin-right: 0.3rem;
font-size: 1rem;
}
/* Wind Card */
.wind-card {
--card-accent: var(--wind-color);
}
.wind-card .weather-icon {
color: var(--wind-color);
}
.wind-card .weather-temp {
color: var(--wind-color);
}
.wind-card .glow {
position: absolute;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(107, 210, 255, var(--glow-intensity)), transparent 70%);
filter: blur(30px);
opacity: 0;
animation: pulseGlow 8s ease-in-out infinite;
}
.wind-card .glow-1 {
top: -50px;
right: -50px;
animation-delay: 0s;
}
.wind-card .glow-2 {
bottom: -30px;
left: -30px;
animation-delay: 2s;
}
.wind-card .cloud {
position: absolute;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 50%;
filter: blur(2px);
opacity: 0.9;
z-index: 1;
}
.wind-card .cloud-1 {
width: 80px;
height: 40px;
top: 80px;
left: -50px;
animation: moveCloud 25s linear infinite;
}
.wind-card .cloud-2 {
width: 120px;
height: 60px;
top: 120px;
left: 50px;
animation: moveCloud 30s linear infinite 5s;
}
.wind-card .cloud-3 {
width: 60px;
height: 30px;
top: 60px;
left: 150px;
animation: moveCloud 20s linear infinite 3s;
}
.wind-card .wind-line {
position: absolute;
height: 2px;
background: linear-gradient(90deg, rgba(107, 210, 255, 0), rgba(107, 210, 255, 0.5), rgba(107, 210, 255, 0));
transform-origin: left center;
filter: blur(1px);
z-index: 1;
}
/* Rain Card */
.rain-card {
--card-accent: var(--rain-color);
background: linear-gradient(135deg, rgba(30, 60, 90, 0.8), rgba(10, 25, 50, 0.9));
}
.rain-card .weather-icon {
color: var(--rain-color);
}
.rain-card .weather-temp {
color: var(--rain-color);
}
.rain-card .glow {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(94, 176, 255, var(--glow-intensity)), transparent 70%);
filter: blur(40px);
bottom: -100px;
right: -100px;
opacity: 0.3;
}
.rain-card .raindrop {
position: absolute;
background: linear-gradient(to bottom, rgba(174, 194, 224, 0.8), rgba(94, 176, 255, 0.8));
width: 2px;
border-radius: 0 0 5px 5px;
filter: blur(0.5px);
z-index: 1;
animation: fallingRain linear infinite;
}
.rain-card .puddle {
position: absolute;
bottom: 30px;
background: radial-gradient(ellipse at center, rgba(100, 149, 237, 0.4), transparent 70%);
border-radius: 50%;
filter: blur(2px);
z-index: 1;
animation: puddleGrow 4s ease-in infinite;
}
.rain-card .puddle-1 {
width: 60px;
height: 15px;
left: 40px;
}
.rain-card .puddle-2 {
width: 45px;
height: 12px;
left: 120px;
animation-delay: 0.5s;
}
.rain-card .puddle-3 {
width: 35px;
height: 10px;
left: 180px;
animation-delay: 1s;
}
/* Sun Card */
.sun-card {
--card-accent: var(--sun-color);
background: linear-gradient(135deg, rgba(60, 40, 30, 0.8), rgba(30, 20, 40, 0.9));
}
.sun-card .weather-icon {
color: var(--sun-color);
}
.sun-card .weather-temp {
color: var(--sun-color);
}
.sun-card .glow {
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 183, 77, var(--glow-intensity)), transparent 60%);
filter: blur(50px);
top: -150px;
right: -150px;
opacity: 0.4;
}
.sun-card .sun {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, #ffde59, #ff8c00);
border-radius: 50%;
top: 80px;
left: 50%;
transform: translateX(-50%);
filter: blur(1px);
box-shadow: 0 0 60px #ffde59;
z-index: 1;
}
.sun-card .sun-ray {
position: absolute;
background: linear-gradient(to right, rgba(255, 222, 89, 0), rgba(255, 222, 89, 0.6), rgba(255, 222, 89, 0));
filter: blur(1px);
animation: pulseRay 3s ease-in-out infinite;
z-index: 1;
}
.sun-card .ray-1 {
width: 180px;
height: 6px;
top: 130px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.sun-card .ray-2 {
width: 6px;
height: 180px;
top: 40px;
left: 50%;
transform: translateX(-50%);
animation-delay: 0.3s;
}
.sun-card .ray-3 {
width: 120px;
height: 6px;
top: 100px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
animation-delay: 0.6s;
}
.sun-card .ray-4 {
width: 120px;
height: 6px;
top: 100px;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
animation-delay: 0.9s;
}
/* Snow Card */
.snow-card {
--card-accent: var(--snow-color);
background: linear-gradient(135deg, rgba(30, 40, 60, 0.8), rgba(10, 20, 40, 0.9));
}
.snow-card .weather-icon {
color: var(--snow-color);
}
.snow-card .weather-temp {
color: var(--snow-color);
}
.snow-card .glow {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(165, 216, 255, var(--glow-intensity)), transparent 70%);
filter: blur(40px);
top: -100px;
left: -100px;
opacity: 0.3;
}
.snow-card .snowflake {
position: absolute;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
filter: blur(0.5px);
z-index: 1;
animation: fallingSnow linear infinite;
}
.snow-card .snow-accumulation {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
border-radius: 0 0 20px 20px;
z-index: 1;
animation: snowAccumulate 8s ease-in-out infinite;
}
/* Animations */
@keyframes moveCloud {
0% {
transform: translateX(-150px);
}
100% {
transform: translateX(300px);
}
}
@keyframes fallingRain {
0% {
transform: translateY(-20px);
height: 10px;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(250px);
height: 20px;
opacity: 0;
}
}
@keyframes puddleGrow {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
opacity: 0.6;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
@keyframes pulseRay {
0% {
opacity: 0.2;
}
50% {
opacity: 0.7;
}
100% {
opacity: 0.2;
}
}
@keyframes pulseGlow {
0% {
opacity: 0;
transform: scale(0.8);
}
50% {
opacity: 0.4;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
@keyframes fallingSnow {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(250px) rotate(360deg);
opacity: 0;
}
}
@keyframes snowAccumulate {
0% {
height: 0;
opacity: 0;
}
20% {
opacity: 0.8;
}
50% {
height: 40px;
opacity: 0.8;
}
80% {
opacity: 0.8;
}
100% {
height: 0;
opacity: 0;
}
}
/* Controls */
.controls {
margin-top: 3rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.control-btn {
padding: 0.8rem 1.5rem;
background: rgba(18, 25, 40, 0.6);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 100px;
cursor: pointer;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s cubic-bezier(0.2, 0.9, 0.1, 1);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
}
.control-btn:hover {
background: rgba(77, 142, 255, 0.2);
border-color: rgba(77, 142, 255, 0.3);
transform: translateY(-2px);
}
.control-btn.active {
background: rgba(77, 142, 255, 0.3);
border-color: rgba(77, 142, 255, 0.5);
color: var(--accent-color);
box-shadow: 0 5px 15px rgba(77, 142, 255, 0.2);
}
.control-btn i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.weather-container {
flex-direction: column;
align-items: center;
}
.weather-card {
width: 100%;
max-width: 320px;
}
.header {
margin-bottom: 2rem;
}
.app-title {
font-size: 2rem;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="header">
<h1 class="app-title">WeatherVista Premium</h1>
<p class="app-subtitle">Immersive weather experience with cinematic animations</p>
<div class="premium-badge">
<i class="fas fa-crown" style="margin-right: 0.5rem;"></i>
PREMIUM SUBSCRIPTION
</div>
</div>
<div class="weather-container">
<!-- Wind Card -->
<div class="weather-card wind-card">
<div class="glow glow-1"></div>
<div class="glow glow-2"></div>
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<h2 class="weather-title">
<i class="weather-icon fas fa-wind"></i>
Wind
</h2>
<p class="weather-desc">Breezy with strong gusts</p>
<div class="weather-temp">
12<span class="temp-unit">°C</span>
</div>
<div class="weather-details">
<div class="detail-item">
<i class="detail-icon fas fa-tachometer-alt"></i>
24 km/h
</div>
<div class="detail-item">
<i class="detail-icon fas fa-long-arrow-alt-up"></i>
45 km/h gusts
</div>
</div>
</div>
<!-- Rain Card -->
<div class="weather-card rain-card">
<div class="glow"></div>
<h2 class="weather-title">
<i class="weather-icon fas fa-cloud-rain"></i>
Rain
</h2>
<p class="weather-desc">Heavy rainfall expected</p>
<div class="weather-temp">
9<span class="temp-unit">°C</span>
</div>
<div class="weather-details">
<div class="detail-item">
<i class="detail-icon fas fa-umbrella"></i>
85% chance
</div>
<div class="detail-item">
<i class="detail-icon fas fa-tint"></i>
12 mm
</div>
</div>
<div class="puddle puddle-1"></div>
<div class="puddle puddle-2"></div>
<div class="puddle puddle-3"></div>
</div>
<!-- Sun Card -->
<div class="weather-card sun-card">
<div class="glow"></div>
<div class="sun"></div>
<div class="sun-ray ray-1"></div>
<div class="sun-ray ray-2"></div>
<div class="sun-ray ray-3"></div>
<div class="sun-ray ray-4"></div>
<h2 class="weather-title">
<i class="weather-icon fas fa-sun"></i>
Sunny
</h2>
<p class="weather-desc">Clear skies all day</p>
<div class="weather-temp">
27<span class="temp-unit">°C</span>
</div>
<div class="weather-details">
<div class="detail-item">
<i class="detail-icon fas fa-sun"></i>
UV 6 High
</div>
<div class="detail-item">
<i class="detail-icon fas fa-clock"></i>
14h daylight
</div>
</div>
</div>
<!-- Snow Card -->
<div class="weather-card snow-card">
<div class="glow"></div>
<h2 class="weather-title">
<i class="weather-icon fas fa-snowflake"></i>
Snow
</h2>
<p class="weather-desc">Light snow showers</p>
<div class="weather-temp">
-3<span class="temp-unit">°C</span>
</div>
<div class="weather-details">
<div class="detail-item">
<i class="detail-icon fas fa-snowflake"></i>
65% chance
</div>
<div class="detail-item">
<i class="detail-icon fas fa-layer-group"></i>
5 cm
</div>
</div>
<div class="snow-accumulation"></div>
</div>
</div>
<div class="controls">
<button class="control-btn active" onclick="toggleAnimation('all')">
<i class="fas fa-globe"></i> All Conditions
</button>
<button class="control-btn" onclick="toggleAnimation('wind')">
<i class="fas fa-wind"></i> Wind
</button>
<button class="control-btn" onclick="toggleAnimation('rain')">
<i class="fas fa-cloud-rain"></i> Rain
</button>
<button class="control-btn" onclick="toggleAnimation('sun')">
<i class="fas fa-sun"></i> Sun
</button>
<button class="control-btn" onclick="toggleAnimation('snow')">
<i class="fas fa-snowflake"></i> Snow
</button>
</div>
<script>
// Create raindrops
const rainCard = document.querySelector('.rain-card');
for (let i = 0; i < 60; i++) {
const raindrop = document.createElement('div');
raindrop.className = 'raindrop';
raindrop.style.left = `${Math.random() * 100}%`;
raindrop.style.animationDuration = `${0.7 + Math.random() * 1.2}s`;
raindrop.style.animationDelay = `${Math.random() * 3}s`;
rainCard.appendChild(raindrop);
}
// Create snowflakes with different shapes
const snowCard = document.querySelector('.snow-card');
const snowflakeShapes = ['❄', '❅', '❆', '✻', '✼'];
for (let i = 0; i < 50; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakeShapes[Math.floor(Math.random() * snowflakeShapes.length)];
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.animationDuration = `${4 + Math.random() * 6}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
snowflake.style.transform = `scale(${0.5 + Math.random()})`;
snowCard.appendChild(snowflake);
}
// Create wind lines
const windCard = document.querySelector('.wind-card');
for (let i = 0; i < 15; i++) {
const windLine = document.createElement('div');
windLine.className = 'wind-line';
windLine.style.top = `${30 + Math.random() * 250}px`;
windLine.style.left = `${Math.random() * 100}%`;
windLine.style.width = `${30 + Math.random() * 70}px`;
windLine.style.transform = `rotate(${-30 + Math.random() * 60}deg)`;
windLine.style.animation = `moveCloud ${3 + Math.random() * 5}s linear infinite`;
windLine.style.animationDelay = `${Math.random() * 5}s`;
windCard.appendChild(windLine);
}
// Control buttons functionality
function toggleAnimation(type) {
const cards = document.querySelectorAll('.weather-card');
const buttons = document.querySelectorAll('.control-btn');
// Update button states
buttons.forEach(btn => {
btn.classList.remove('active');
if ((type === 'all' && btn.textContent.includes('All')) ||
(type === 'wind' && btn.textContent.includes('Wind')) ||
(type === 'rain' && btn.textContent.includes('Rain')) ||
(type === 'sun' && btn.textContent.includes('Sun')) ||
(type === 'snow' && btn.textContent.includes('Snow'))) {
btn.classList.add('active');
}
});
// Show/hide cards based on selection
cards.forEach(card => {
if (type === 'all') {
card.style.display = 'flex';
card.style.opacity = '1';
} else {
if (card.classList.contains(`${type}-card`)) {
card.style.display = 'flex';
setTimeout(() => {
card.style.opacity = '1';
}, 10);
} else {
card.style.opacity = '0';
setTimeout(() => {
card.style.display = 'none';
}, 300);
}
}
});
}
// Add subtle parallax effect on mouse move
document.addEventListener('mousemove', (e) => {
const cards = document.querySelectorAll('.weather-card');
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
cards.forEach(card => {
card.style.transform = `translateY(-10px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
});
// Initialize with all animations
toggleAnimation('all');
</script>
</body>
</html>