当前位置：首页 > CSS

css天气制作

2026-02-12 22:15:09CSS

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;
  transform: rotate(15deg);
}

阴天效果

使用椭圆云朵形状：

css天气制作

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

雨天效果

结合云朵和雨滴：

.rain {
  /* 云朵样式同阴天效果 */
}
.rain::after {
  content: "";
  position: absolute;
  top: 70px;
  left: 30px;
  width: 4px;
  height: 20px;
  background: #7FDBFF;
  transform: rotate(15deg);
  animation: rain 1s linear infinite;
}
@keyframes rain {
  0% { transform: translateY(0) rotate(15deg); opacity: 1; }
  100% { transform: translateY(50px) rotate(15deg); opacity: 0; }
}

雪天效果

使用圆点和动画模拟雪花：

css天气制作

.snow {
  /* 云朵样式同阴天效果 */
}
.snow::after {
  content: ".";
  color: white;
  position: absolute;
  top: 70px;
  left: 30px;
  animation: snow 3s linear infinite;
}
@keyframes snow {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(50px) rotate(360deg); opacity: 0; }
}

动画增强效果

为天气图标添加动画使效果更生动：

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
.weather-icon {
  animation: float 3s ease-in-out infinite;
}

响应式设计

使用CSS变量使天气图标适应不同尺寸：

:root {
  --weather-size: 100px;
}
.weather-icon {
  width: var(--weather-size);
  height: var(--weather-size);
}
@media (max-width: 600px) {
  :root {
    --weather-size: 70px;
  }
}

这些CSS代码可以单独使用，也可以组合创建更复杂的天气效果。通过调整颜色、尺寸和动画参数，可以实现各种天气状况的视觉表现。