天气卡片（城市切换 + 摄氏华氏换算 CSS 源码）

效果演示（真实可交互）

下方为天气卡片：顶部可切换摄氏/华氏单位，温度数字带淡出淡入过渡；中部展示天气图标、当前温度与天气描述，底部为湿度、风速、AQI 三项详情和未来 6 小时预报条；通过下拉框切换广州、北京、上海、成都四座城市，所有数据会联动刷新。

完整代码

HTML 结构：卡片分为顶部（城市名 + 单位切换）、主体（图标 + 温度）、详情区、小时预报条四个区块：

<div class="wc-card">
  <div class="wc-top">
    <div class="wc-city"><h3>广州</h3><p>2026-09-01 · 周二</p></div>
    <div class="wc-unit">
      <button data-unit="c">°C</button>
      <button data-unit="f">°F</button>
    </div>
  </div>
  <div class="wc-main">
    <span class="wc-icon">⛅</span>
    <div class="wc-temp"><b>32</b><span>°</span></div>
    <p class="wc-desc">多云转晴 · 东南风 2 级</p>
  </div>
  <div class="wc-detail">
    <div class="wc-item"><span>湿度</span><b>62%</b></div>
    <div class="wc-item"><span>风速</span><b>11 km/h</b></div>
    <div class="wc-item"><span>AQI</span><b>38 优</b></div>
  </div>
</div>

核心 CSS：温度数字使用渐变文字 + 切换时的透明度过渡，单位切换按钮为胶囊分段控件：

.wc-temp b {
  font-size: 58px; font-weight: 800;
  background: linear-gradient(180deg, #fff, #9db4ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wc-temp.pop b { opacity: .4; }   /* 切换时的淡出反馈 */
.wc-unit-btn.active { background: linear-gradient(135deg, #6c8cff, #a96cff); color: #fff; }

原生 JS 温度换算与渲染（无第三方库）：

const DATA = { guangzhou: { temp: 32, ... }, beijing: { temp: 26, ... } };
function c2f(c) { return Math.round(c * 9 / 5 + 32); }
function fmtC(c) { return unit === 'c' ? c : c2f(c); }
citySel.addEventListener('change', () => render(true));
unitBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    unit = btn.dataset.unit;
    render(true);   // 带淡入淡出动画刷新
  });
});

参数说明

兼容性与性能

• 数据以 JS 对象集中管理，接入真实天气 API 时只需替换 DATA 的取值来源（如 OpenWeatherMap 返回体）
• 小时预报条使用 innerHTML 整体重建，仅 6 个节点开销极小；数据量更大时可改为增量渲染
• 渐变文字与 background-clip: text 在不支持的浏览器中自动降级为普通白色数字
• 单位换算在内存中完成，无 DOM 重排热点，频繁切换也不会卡顿

常见问题

Q: 数据是写死的假数据吗？ 是演示数据。生产环境可调用天气 API，在 render 前把返回数据映射到卡片结构即可，换算逻辑无需改动。

Q: 小时预报条在手机上显示不全怎么办？ 已设置 overflow-x: auto 横向滚动，配合细滚动条样式，手机上可左右滑动查看全部时段。

Q: 如何显示未来 7 天预报？ 在详情区下方追加一个横向滚动区，把 hourly 换成 daily 数组，字段改为星期、最高/最低温即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，接入真实数据源后即可上线。