css怎么制作天气

使用CSS制作天气图标

通过CSS可以创建简洁的天气图标，如晴天、多云、雨天等。以下是几种常见天气图标的实现方法：

晴天图标 使用圆形和射线模拟太阳：

.sun {
  width: 100px;
  height: 100px;
  background: #FDB813;
  border-radius: 50%;
  box-shadow: 0 0 50px #FDB813;
  position: relative;
}
.sun:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 40px;
  width: 20px;
  height: 130px;
  background: #FDB813;
}
.sun:before {
  content: "";
  position: absolute;
  top: 40px;
  left: -15px;
  width: 130px;
  height: 20px;
  background: #FDB813;
}

多云图标 使用椭圆叠加创建云朵效果：

.cloud {
  width: 150px;
  height: 60px;
  background: #ECEFF1;
  border-radius: 50px;
  position: relative;
}
.cloud:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 30px;
  width: 70px;
  height: 70px;
  background: #ECEFF1;
  border-radius: 50%;
}
.cloud:after {
  content: "";
  position: absolute;
  top: -40px;
  left: 70px;
  width: 50px;
  height: 50px;
  background: #ECEFF1;
  border-radius: 50%;
}

雨天图标 在云朵基础上添加雨滴：

.rain {
  position: relative;
}
.rain:after {
  content: "";
  position: absolute;
  top: 60px;
  left: 20px;
  width: 5px;
  height: 20px;
  background: #90CAF9;
  transform: rotate(20deg);
}
/* 可重复多个:after选择器创建更多雨滴 */

添加动画效果

为天气图标添加动态效果能增强真实感：

闪烁的太阳

@keyframes shine {
  0% { box-shadow: 0 0 30px #FDB813; }
  50% { box-shadow: 0 0 60px #FDB813; }
  100% { box-shadow: 0 0 30px #FDB813; }
}
.sun {
  animation: shine 3s infinite;
}

飘动的云

@keyframes float {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
.cloud {
  animation: float 5s infinite;
}

下落的雨滴

@keyframes fall {
  from { transform: translateY(-20px); opacity: 1; }
  to { transform: translateY(40px); opacity: 0; }
}
.rain:after {
  animation: fall 1s linear infinite;
}

响应式设计

确保天气图标在不同设备上显示良好：

.weather-icon {
  width: 100px;
  height: 100px;
}

@media (max-width: 768px) {
  .weather-icon {
    width: 70px;
    height: 70px;
  }
}

这些CSS技巧可以组合使用，创建各种天气状况的可视化表示。通过调整颜色、形状和动画参数，能够实现更丰富的天气图标效果。