css制作web天气

使用CSS制作Web天气效果

通过CSS可以模拟多种天气效果，如晴天、雨天、雪天等。以下是一些常见天气效果的实现方法。

晴天效果

创建太阳和云朵的简单动画效果：

.sun {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ffde00 30%, #ff8c00 70%);
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 100px;
  box-shadow: 0 0 50px #ffde00;
  animation: shine 3s infinite alternate;
}

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

雨天效果

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

.rain {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.rain:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 10px;
  background: rgba(174, 194, 224, 0.5);
  animation: rain 1s linear infinite;
}

@keyframes rain {
  0% { transform: translateY(-50px) rotate(15deg); opacity: 1; }
  100% { transform: translateY(200px) rotate(15deg); opacity: 0; }
}

雪天效果

创建雪花飘落效果：

.snow {
  position: relative;
  height: 300px;
  overflow: hidden;
}

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

@keyframes snowfall {
  0% { transform: translateY(-10px) translateX(0); }
  100% { transform: translateY(300px) translateX(50px); }
}

多云效果

创建移动的云朵：

.cloud {
  width: 150px;
  height: 60px;
  background: #f5f5f5;
  border-radius: 50px;
  position: absolute;
  animation: moveCloud 20s linear infinite;
}

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

.cloud:before {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 25px;
}

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

@keyframes moveCloud {
  from { left: -150px; }
  to { left: 100%; }
}

雷电效果

添加闪电动画：

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

@keyframes lightning {
  0% { opacity: 0; }
  1% { opacity: 1; }
  2% { opacity: 0; }
  8% { opacity: 0; }
  9% { opacity: 1; }
  10% { opacity: 0; }
  100% { opacity: 0; }
}

组合使用

这些效果可以组合使用，通过添加不同的类名来切换天气效果：

<div class="weather-container">
  <div class="sun"></div>
  <div class="cloud"></div>
  <div class="rain"></div>
</div>

通过调整CSS属性和动画参数，可以创建更加逼真的天气效果。对于更复杂的场景，可以考虑使用CSS预处理器如Sass或Less来管理样式。