console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Card</title>
<style>
body {
background: #1a1a2e;
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 20px;
}
.weather-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.weather-card {
width: 300px;
height: 400px;
background: linear-gradient(135deg, #16213e, #0f3460);
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: #2c3e50;
border-top: 2px solid #34495e;
}
.wind .cloud {
position: absolute;
width: 80px;
height: 40px;
background: #fff;
border-radius: 20px;
top: 20%;
animation: wind-clouds 8s linear infinite;
}
.wind .cloud::before,
.wind .cloud::after {
content: '';
position: absolute;
background: #fff;
border-radius: 50%;
}
.wind .cloud::before {
width: 40px;
height: 40px;
left: -20px;
top: -20px;
}
.wind .cloud::after {
width: 60px;
height: 60px;
right: -30px;
top: -30px;
}
.wind .tree {
position: absolute;
bottom: 30%;
width: 50px;
height: 80px;
background: #2c3e50;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation: sway 3s ease-in-out infinite;
}
.rain .raindrop {
position: absolute;
width: 2px;
height: 20px;
background: #a0d8ef;
animation: rain-fall 0.8s linear infinite;
}
.rain .puddle {
position: absolute;
bottom: 30%;
width: 40px;
height: 10px;
background: #a0d8ef;
border-radius: 50%;
opacity: 0.7;
}
.sun .sun-circle {
width: 60px;
height: 60px;
background: #ff9f43;
border-radius: 50%;
box-shadow: 0 0 20px #ff9f43;
animation: pulse 2s infinite;
}
.sun .rays {
position: absolute;
width: 100%;
height: 100%;
animation: spin 20s linear infinite;
}
.sun .ray {
position: absolute;
width: 2px;
height: 40px;
background: #ff9f43;
top: -20px;
left: 50%;
transform-origin: bottom;
}
.snow .snowflake {
position: absolute;
width: 5px;
height: 5px;
background: #fff;
border-radius: 50%;
animation: snow-fall 5s linear infinite;
}
@keyframes wind-clouds {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
@keyframes sway {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
@keyframes rain-fall {
from { transform: translateY(-100px); opacity: 0.5; }
to { transform: translateY(100vh); opacity: 1; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 20px #ff9f43; }
50% { transform: scale(1.1); box-shadow: 0 0 30px #ff9f43; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes snow-fall {
0% { transform: translateY(-50px) translateX(0); opacity: 0; }
100% { transform: translateY(100vh) translateX(50px); opacity: 1; }
}
.controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
button {
padding: 10px 20px;
background: #e94560;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="weather-container">
<div class="weather-card wind">
<div class="cloud" style="left: 20%; animation-delay: 1s;"></div>
<div class="cloud" style="left: 60%; animation-delay: 3s;"></div>
<div class="tree" style="left: 30%;"></div>
<div class="tree" style="right: 30%;"></div>
<div class="ground"></div>
</div>
<div class="weather-card rain">
<div class="raindrop" style="left: 10%; animation-delay: 0.2s;"></div>
<div class="raindrop" style="left: 30%; animation-delay: 0.4s;"></div>
<div class="raindrop" style="left: 50%; animation-delay: 0.6s;"></div>
<div class="raindrop" style="left: 70%; animation-delay: 0.8s;"></div>
<div class="puddle" style="left: 40%;"></div>
<div class="ground"></div>
</div>
<div class="weather-card sun">
<div class="sun-circle"></div>
<div class="rays">
<div class="ray" style="transform: rotate(0deg)"></div>
<div class="ray" style="transform: rotate(45deg)"></div>
<div class="ray" style="transform: rotate(90deg)"></div>
<div class="ray" style="transform: rotate(135deg)"></div>
<div class="ray" style="transform: rotate(180deg)"></div>
<div class="ray" style="transform: rotate(225deg)"></div>
<div class="ray" style="transform: rotate(270deg)"></div>
<div class="ray" style="transform: rotate(315deg)"></div>
</div>
<div class="ground"></div>
</div>
<div class="weather-card snow">
<div class="snowflake" style="left: 20%; animation-delay: 1s;"></div>
<div class="snowflake" style="left: 50%; animation-delay: 2s;"></div>
<div class="snowflake" style="left: 80%; animation-delay: 3s;"></div>
<div class="ground" style="background: #e9ecef;"></div>
</div>
</div>
<div class="controls">
<button onclick="setActive('wind')">Wind</button>
<button onclick="setActive('rain')">Rain</button>
<button onclick="setActive('sun')">Sun</button>
<button onclick="setActive('snow')">Snow</button>
</div>
<script>
function setActive(weather) {
document.querySelectorAll('.weather-card').forEach(card => {
card.style.display = 'none';
});
document.querySelector(`.${weather}`).style.display = 'flex';
}
setActive('wind');
</script>
</body>
</html>