css制作web天气
使用CSS制作Web天气效果
通过CSS可以创建动态的天气效果，如晴天、雨天、雪天等。以下是几种常见天气效果的实现方法。
晴天效果
创建一个太阳和云朵的简单组合，使用CSS动画让太阳旋转。
<div class="weather sunny">
<div class="sun"></div>
<div class="cloud"></div>
</div>.weather {
width: 200px;
height: 200px;
position: relative;
background: skyblue;
}
.sun {
width: 50px;
height: 50px;
background: yellow;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
animation: rotate 5s linear infinite;
}
.cloud {
width: 80px;
height: 30px;
background: white;
border-radius: 20px;
position: absolute;
top: 50px;
left: 60px;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}雨天效果
使用伪元素和动画模拟雨滴下落。
<div class="weather rainy">
<div class="cloud"></div>
</div>.rainy {
background: darkgray;
}
.rainy .cloud {
width: 100px;
height: 40px;
background: white;
border-radius: 20px;
position: absolute;
top: 30px;
left: 50px;
}
.rainy .cloud::after {
content: '';
position: absolute;
width: 2px;
height: 10px;
background: lightblue;
top: 40px;
left: 10px;
animation: rain 1s linear infinite;
}
@keyframes rain {
from { transform: translateY(0); }
to { transform: translateY(50px); }
}雪天效果
使用多个动画元素模拟雪花飘落。
<div class="weather snowy">
<div class="cloud"></div>
</div>.snowy {
background: lightgray;
}
.snowy .cloud {
width: 100px;
height: 40px;
background: white;
border-radius: 20px;
position: absolute;
top: 30px;
left: 50px;
}
.snowy .cloud::after {
content: '❄';
position: absolute;
font-size: 10px;
top: 40px;
left: 10px;
animation: snow 3s linear infinite;
}
@keyframes snow {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(50px) rotate(360deg); }
}动态切换天气
通过JavaScript动态切换天气效果。
<div class="weather" id="weather">
<div class="sun"></div>
<div class="cloud"></div>
</div>
<button onclick="changeWeather('sunny')">Sunny</button>
<button onclick="changeWeather('rainy')">Rainy</button>
<button onclick="changeWeather('snowy')">Snowy</button>function changeWeather(type) {
const weather = document.getElementById('weather');
weather.className = 'weather ' + type;
}以上方法展示了如何使用CSS和少量JavaScript创建动态的天气效果。可以根据需求进一步调整样式和动画参数。
