当前位置：首页 > CSS

css天气制作

2026-01-28 03:52:25CSS

CSS天气动画制作

使用CSS可以创建简单的天气动画效果，如晴天、雨天、雪天等。以下是几种常见天气效果的实现方法：

晴天效果

通过径向渐变和动画制作太阳发光效果：

.sun {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ffde00 30%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 50px #ffde00;
  position: relative;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 30px #ffde00; }
  to { box-shadow: 0 0 70px #ffde00; }
}

雨天效果

使用伪元素和动画创建雨滴下落效果：

.raindrop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: linear-gradient(transparent, #7ec0ee);
  animation: rain 1s linear infinite;
}

@keyframes rain {
  from { transform: translateY(-100px); }
  to { transform: translateY(300px); }
}

雪天效果

创建多个雪片随机飘落：

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  animation: snowfall linear infinite;
}

@keyframes snowfall {
  from { transform: translateY(-50px) rotate(0deg); }
  to { transform: translateY(300px) rotate(360deg); }
}

云朵效果

使用椭圆形状组合成云朵：

.cloud {
  position: relative;
  width: 150px;
  height: 60px;
  background: #f0f0f0;
  border-radius: 50%;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #f0f0f0;
  border-radius: 50%;
}

.cloud::before {
  width: 80px;
  height: 80px;
  top: -40px;
  left: 20px;
}

.cloud::after {
  width: 60px;
  height: 60px;
  top: -30px;
  right: 20px;
}

雷电效果

使用关键帧动画制作闪电效果：

.lightning {
  position: absolute;
  width: 5px;
  height: 50px;
  background: yellow;
  opacity: 0;
  animation: lightning 4s infinite;
}

@keyframes lightning {
  0%, 50%, 100% { opacity: 0; }
  51%, 55% { opacity: 1; }
}

完整示例结构

HTML基础结构：

<div class="weather-container">
  <div class="sun"></div>
  <div class="cloud"></div>
  <div class="raindrop" style="left:10%;"></div>
  <div class="snowflake" style="left:20%;"></div>
  <div class="lightning" style="left:30%;"></div>
</div>

通过调整这些CSS属性和动画参数，可以创建各种逼真的天气效果。使用transform、opacity和filter属性可以增强动画的真实感。

css天气制作