当前位置：首页 > CSS

css制作web天气

2026-01-28 18:08:14CSS

使用CSS制作Web天气界面

基础结构设计

HTML部分需要包含天气信息的基本结构，例如城市名称、温度、天气图标和描述。以下是一个简单的HTML结构示例：

<div class="weather-card">
  <div class="location">New York</div>
  <div class="temperature">22°C</div>
  <div class="weather-icon">☀️</div>
  <div class="description">Sunny</div>
</div>

CSS样式设计

通过CSS为天气卡片添加视觉效果，包括背景渐变、阴影和动画：

css制作web天气

.weather-card {
  width: 200px;
  padding: 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #72EDF2 0%, #5151E5 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
  font-family: 'Arial', sans-serif;
  transition: transform 0.3s ease;
}

.weather-card:hover {
  transform: translateY(-5px);
}

.temperature {
  font-size: 2.5em;
  font-weight: bold;
  margin: 10px 0;
}

.weather-icon {
  font-size: 3em;
}

.description {
  font-size: 1.2em;
  text-transform: capitalize;
}

动态天气图标

使用CSS自定义天气图标，替代简单的Emoji。可以通过伪元素或背景图像实现：

.weather-icon.sunny::before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #FFD700 40%, transparent 40%);
  border-radius: 50%;
  box-shadow: 0 0 20px #FFD700;
}

响应式设计

确保天气卡片在不同设备上都能良好显示：

css制作web天气

@media (max-width: 600px) {
  .weather-card {
    width: 150px;
    padding: 15px;
  }

  .temperature {
    font-size: 2em;
  }

  .weather-icon {
    font-size: 2.5em;
  }
}

动画效果

添加CSS动画使天气元素更具交互性，例如模拟下雨或飘雪：

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

.rain-drop {
  position: absolute;
  width: 2px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  animation: rain 1s linear infinite;
}

夜间模式切换

通过CSS变量实现白天/夜间模式切换：

.weather-card.night {
  --bg-color-1: #1A2980;
  --bg-color-2: #26D0CE;
  --text-color: #E0E0E0;
  background: linear-gradient(135deg, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
  color: var(--text-color);
}

这些CSS技术可以组合使用，创建出视觉吸引人且功能完善的Web天气界面。根据实际需求，可以进一步扩展样式和交互效果。