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 Cards</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #121212;
color: white;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 2rem;
}
h1 {
margin-bottom: 2rem;
font-size: 2.5rem;
text-align: center;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.btn {
padding: 0.75rem 1.5rem;
background-color: #2d3748;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.btn:hover {
background-color: #4a5568;
transform: translateY(-2px);
}
.btn.active {
background-color: #4299e1;
box-shadow: 0 0 15px rgba(66, 153, 225, 0.5);
}
.cards-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
max-width: 1200px;
}
.weather-card {
width: 300px;
height: 400px;
background-color: #1a202c;
border-radius: 1rem;
overflow: hidden;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
transition: all 0.5s ease;
}
.weather-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}
.card-header {
padding: 1.5rem;
text-align: center;
background-color: #2d3748;
z-index: 10;
position: relative;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
font-weight: bold;
}
.card-temp {
font-size: 2.5rem;
font-weight: bold;
}
.card-body {
position: relative;
height: calc(100% - 80px);
overflow: hidden;
}
.sun {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, #ffeb3b, #ff9800);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px #ffeb3b, 0 0 100px #ff9800;
animation: pulse 3s infinite alternate;
}
.sun-ray {
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(to right, rgba(255, 235, 59, 0.8), rgba(255, 235, 59, 0));
height: 3px;
width: 100px;
transform-origin: 0 0;
animation: rotate 20s linear infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 50px #ffeb3b, 0 0 100px #ff9800;
}
100% {
box-shadow: 0 0 70px #ffeb3b, 0 0 120px #ff9800;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.raindrop {
position: absolute;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
animation: rain linear infinite;
}
.puddle {
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: puddle-appear 5s infinite;
}
@keyframes rain {
0% {
transform: translateY(-100px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(400px);
opacity: 0;
}
}
@keyframes puddle-appear {
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 0.3;
}
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: cloud-move linear infinite;
}
.wind-line {
position: absolute;
height: 2px;
background: rgba(255, 255, 255, 0.5);
animation: wind-blow linear infinite;
}
.tree {
position: absolute;
bottom: 0;
width: 10px;
background: #2d3748;
}
.tree-top {
position: absolute;
width: 30px;
height: 40px;
background: #4a5568;
border-radius: 50% 50% 20% 20%;
animation: tree-sway 3s ease-in-out infinite;
}
@keyframes cloud-move {
from {
transform: translateX(-150px);
}
to {
transform: translateX(450px);
}
}
@keyframes wind-blow {
0% {
transform: translateX(-100px);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
transform: translateX(400px);
opacity: 0;
}
}
@keyframes tree-sway {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
.snowflake {
position: absolute;
color: white;
font-size: 20px;
animation: snowfall linear infinite;
}
.snow-ground {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50% 50% 0 0;
}
@keyframes snowfall {
0% {
transform: translateY(-50px) translateX(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(350px) translateX(100px) rotate(360deg);
opacity: 0;
}
}
.card-footer {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
z-index: 10;
}
</style>
</head>
<body>
<h1>Animated Weather Cards</h1>
<div class="controls">
<button class="btn active" data-weather="sun">Sunny</button>
<button class="btn" data-weather="rain">Rainy</button>
<button class="btn" data-weather="wind">Windy</button>
<button class="btn" data-weather="snow">Snowy</button>
</div>
<div class="cards-container">
<div class="weather-card">
<div class="card-header">
<div class="card-title">Sunny</div>
<div class="card-temp">28°C</div>
</div>
<div class="card-body" id="sun-card">
</div>
<div class="card-footer">Clear skies</div>
</div>
<div class="weather-card">
<div class="card-header">
<div class="card-title">Rainy</div>
<div class="card-temp">15°C</div>
</div>
<div class="card-body" id="rain-card">
</div>
<div class="card-footer">Light rain</div>
</div>
<div class="weather-card">
<div class="card-header">
<div class="card-title">Windy</div>
<div class="card-temp">18°C</div>
</div>
<div class="card-body" id="wind-card">
</div>
<div class="card-footer">Strong breeze</div>
</div>
<div class="weather-card">
<div class="card-header">
<div class="card-title">Snowy</div>
<div class="card-temp">-2°C</div>
</div>
<div class="card-body" id="snow-card">
</div>
<div class="card-footer">Light snow</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
createSunAnimation();
createRainAnimation();
createWindAnimation();
createSnowAnimation();
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
const weatherType = this.getAttribute('data-weather');
updateAllCards(weatherType);
});
});
});
function updateAllCards(weatherType) {
const cards = document.querySelectorAll('.weather-card');
cards.forEach(card => {
const cardBody = card.querySelector('.card-body');
const cardTitle = card.querySelector('.card-title');
const cardTemp = card.querySelector('.card-temp');
const cardFooter = card.querySelector('.card-footer');
cardBody.innerHTML = '';
switch(weatherType) {
case 'sun':
createSunAnimation(cardBody);
cardTitle.textContent = 'Sunny';
cardTemp.textContent = '28°C';
cardFooter.textContent = 'Clear skies';
break;
case 'rain':
createRainAnimation(cardBody);
cardTitle.textContent = 'Rainy';
cardTemp.textContent = '15°C';
cardFooter.textContent = 'Light rain';
break;
case 'wind':
createWindAnimation(cardBody);
cardTitle.textContent = 'Windy';
cardTemp.textContent = '18°C';
cardFooter.textContent = 'Strong breeze';
break;
case 'snow':
createSnowAnimation(cardBody);
cardTitle.textContent = 'Snowy';
cardTemp.textContent = '-2°C';
cardFooter.textContent = 'Light snow';
break;
}
});
}
function createSunAnimation(container = document.getElementById('sun-card')) {
const sun = document.createElement('div');
sun.className = 'sun';
container.appendChild(sun);
for (let i = 0; i < 8; i++) {
const ray = document.createElement('div');
ray.className = 'sun-ray';
ray.style.transform = `rotate(${i * 45}deg)`;
container.appendChild(ray);
}
}
function createRainAnimation(container = document.getElementById('rain-card')) {
for (let i = 0; i < 50; i++) {
const raindrop = document.createElement('div');
raindrop.className = 'raindrop';
raindrop.style.left = `${Math.random() * 100}%`;
raindrop.style.height = `${Math.random() * 10 + 10}px`;
raindrop.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
raindrop.style.animationDelay = `${Math.random() * 2}s`;
container.appendChild(raindrop);
}
for (let i = 0; i < 5; i++) {
const puddle = document.createElement('div');
puddle.className = 'puddle';
puddle.style.left = `${Math.random() * 80 + 10}%`;
puddle.style.bottom = `${Math.random() * 20 + 10}%`;
puddle.style.width = `${Math.random() * 30 + 20}px`;
puddle.style.height = `${Math.random() * 10 + 5}px`;
puddle.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(puddle);
}
}
function createWindAnimation(container = document.getElementById('wind-card')) {
for (let i = 0; i < 5; i++) {
const cloud = document.createElement('div');
cloud.className = 'cloud';
cloud.style.top = `${Math.random() * 60 + 10}%`;
cloud.style.width = `${Math.random() * 50 + 30}px`;
cloud.style.height = `${Math.random() * 20 + 20}px`;
cloud.style.animationDuration = `${Math.random() * 10 + 10}s`;
cloud.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(cloud);
}
for (let i = 0; i < 15; i++) {
const windLine = document.createElement('div');
windLine.className = 'wind-line';
windLine.style.top = `${Math.random() * 100}%`;
windLine.style.width = `${Math.random() * 50 + 20}px`;
windLine.style.animationDuration = `${Math.random() * 2 + 1}s`;
windLine.style.animationDelay = `${Math.random() * 3}s`;
container.appendChild(windLine);
}
for (let i = 0; i < 3; i++) {
const tree = document.createElement('div');
tree.className = 'tree';
tree.style.left = `${Math.random() * 80 + 10}%`;
tree.style.height = `${Math.random() * 30 + 40}px`;
const treeTop = document.createElement('div');
treeTop.className = 'tree-top';
treeTop.style.left = `-${15}px`;
treeTop.style.bottom = `${Math.random() * 10 + 10}px`;
tree.appendChild(treeTop);
container.appendChild(tree);
}
}
function createSnowAnimation(container = document.getElementById('snow-card')) {
for (let i = 0; i < 30; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.innerHTML = '❄';
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.fontSize = `${Math.random() * 10 + 10}px`;
snowflake.style.animationDuration = `${Math.random() * 5 + 3}s`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
container.appendChild(snowflake);
}
const snowGround = document.createElement('div');
snowGround.className = 'snow-ground';
container.appendChild(snowGround);
}
</script>
</body>
</html>