单标签纯CSS呈现晴阴雨雪，体验绝妙视觉效果

2024-01-10 08:36:27

CSS技术博大精深，而本期要给大家介绍的内容也是相当的有趣。我们将通过纯CSS实现单标签的动态晴阴雨雪效果。

HTML结构

<div class="weather"></div>

CSS样式

.weather {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 晴天 */
.weather-sun {
  background: #f6c94c;
}

.weather-sun:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffeb3b;
}

/* 阴天 */
.weather-cloud {
  background: #95a5a6;
}

.weather-cloud:before {
  content: "";
  position: absolute;
  top: 20%;
  left: 30%;
  width: 80px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
}

.weather-cloud:after {
  content: "";
  position: absolute;
  top: 40%;
  left: 60%;
  width: 60px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
}

/* 雨天 */
.weather-rain {
  background: #40739e;
}

.weather-rain:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./rain.png);
  animation: rain 3s infinite linear;
}

@keyframes rain {
  0% {
    transform: translate3d(0, -100%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* 雪天 */
.weather-snow {
  background: #e0f7fa;
}

.weather-snow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./snow.png);
  animation: snow 3s infinite linear;
}

@keyframes snow {
  0% {
    transform: translate3d(0, -100%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}