当前位置：首页 > CSS

css怎么制作天气

2026-04-02 07:21:53CSS

使用CSS制作天气图标

利用CSS的伪元素、渐变和阴影效果可以创建简单的天气图标。以下是一些常见天气图标的实现方法：

晴天图标

.sun {
  width: 80px;
  height: 80px;
  background: #FFD700;
  border-radius: 50%;
  box-shadow: 0 0 20px #FFD700;
  position: relative;
}

.sun::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 35px;
  width: 10px;
  height: 30px;
  background: #FFD700;
  transform: rotate(0deg);
}

.sun::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 35px;
  width: 10px;
  height: 30px;
  background: #FFD700;
  transform: rotate(45deg);
}

阴天图标

.cloud {
  width: 100px;
  height: 60px;
  background: #E0E0E0;
  border-radius: 50px;
  position: relative;
}

.cloud::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #E0E0E0;
  border-radius: 50%;
  top: -25px;
  left: 15px;
}

.cloud::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: #E0E0E0;
  border-radius: 50%;
  top: -15px;
  right: 15px;
}

雨天图标

css怎么制作天气

.rain {
  width: 100px;
  height: 60px;
  background: #A0A0A0;
  border-radius: 50px;
  position: relative;
}

.rain::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #A0A0A0;
  border-radius: 50%;
  top: -25px;
  left: 15px;
}

.raindrop {
  position: absolute;
  width: 5px;
  height: 10px;
  background: #6495ED;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  bottom: -15px;
  left: 30px;
}

动画效果增强

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

太阳旋转动画

css怎么制作天气

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sun {
  animation: rotate 10s linear infinite;
}

雨滴下落动画

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

.raindrop {
  animation: rainDrop 1s linear infinite;
}

响应式设计

使用CSS变量和相对单位使天气图标适应不同屏幕尺寸：

:root {
  --weather-size: 5vmin;
}

.weather-icon {
  width: var(--weather-size);
  height: var(--weather-size);
  margin: calc(var(--weather-size)/2);
}

完整示例

结合HTML和CSS创建完整的天气组件：

<div class="weather-widget">
  <div class="weather-icon sun"></div>
  <div class="weather-info">
    <span class="temp">25°C</span>
    <span class="location">北京</span>
  </div>
</div>

<style>
.weather-widget {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
}

.weather-icon {
  margin-right: 15px;
}

.temp {
  font-size: 24px;
  font-weight: bold;
}

.location {
  display: block;
  color: #666;
}
</style>

这些CSS技术可以组合使用创建各种天气效果，通过调整颜色、形状和动画参数，可以实现更复杂的天气表现形式。