当前位置：首页 > CSS

css天气制作

2026-02-27 06:50:40CSS

CSS天气动画制作

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

晴天效果（太阳动画）

使用CSS动画实现太阳发光效果：

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

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

雨天效果（雨滴动画）

创建下落雨滴效果：

<div class="rain">
  <div class="drop" style="left:10%; animation-delay:0s"></div>
  <div class="drop" style="left:30%; animation-delay:0.3s"></div>
  <!-- 更多雨滴 -->
</div>

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

.drop {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(transparent, #7ec0ee);
  border-radius: 0 0 5px 5px;
  animation: rain 1s linear infinite;
}

@keyframes rain {
  from { transform: translateY(-50px); }
  to { transform: translateY(200px); }
}

雪天效果（雪花飘落）

实现雪花飘落动画：

.snowflake {
  position: absolute;
  color: white;
  font-size: 1em;
  animation: snow 10s linear infinite;
}

@keyframes snow {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

多云效果（云朵移动）

创建云朵飘动效果：

css天气制作

.cloud {
  width: 100px;
  height: 60px;
  background: #fff;
  border-radius: 50px;
  position: relative;
  animation: move 20s linear infinite;
}

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

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

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

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