css天气制作

CSS天气图标制作

使用纯CSS绘制天气图标（如晴天、多云、雨天等）可通过以下方法实现：

基础结构

<div class="weather-icon sunny"></div>

.weather-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: #f8f8f8;
}

晴天图标实现

太阳光晕效果

.sunny::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: #FFD700;
  border-radius: 50%;
  top: 20px;
  left: 20px;
  box-shadow: 0 0 30px #FFD700;
}

.sunny::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FFA500;
  border-radius: 50%;
  top: 45px;
  left: 45px;
}

多云图标实现

云朵形状

.cloudy {
  background: #E0E0E0;
}

.cloudy::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 40px;
  background: white;
  border-radius: 40px;
  top: 30px;
  left: 10px;
  box-shadow: 
    30px -10px 0 10px white,
    10px 20px 0 15px white;
}

雨天图标实现

雨滴动画

.rainy {
  background: #B0C4DE;
}

.rainy::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 40px;
  background: #D3D3D3;
  border-radius: 40px;
  top: 20px;
  left: 10px;
}

.rainy::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 10px;
  background: #87CEEB;
  animation: rain 1s linear infinite;
}

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

雪天图标实现

雪花图案

.snowy {
  background: #F0F8FF;
}

.snowy::before {
  content: "❄";
  position: absolute;
  font-size: 30px;
  color: white;
  top: 35px;
  left: 35px;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

动态效果增强

添加悬停动画

.weather-icon:hover {
  transform: scale(1.1);
  transition: all 0.3s ease;
}

通过组合这些CSS技术，可以创建各种天气状态的视觉表现。关键点包括使用伪元素构建复杂形状、CSS动画实现动态效果，以及合理运用阴影和渐变增强立体感。实际应用中可根据需要调整颜色、尺寸和动画参数。