纯CSS实现天气图标动画需用@keyframes配合transform和opacity，分别控制云朵飘动（translateX±12px）、雨滴下落（translateY+opacity淡入淡出）、太阳光晕脉动（scale0.95–1.05）；须使用内联SVG、为各元素设class、避免内联样式，并通过容器class切换天气类型动画。
怎么用 CSS 实现天气图标动画（比如云朵飘动、雨滴下落）
纯 CSS 就能做出轻量、可复用的天气图标动画，不需要 JS 或第三方库。关键在合理使用 @keyframes + transform + opacity，配合 SVG 图标结构控制动画粒度。
常见错误是直接给整个 <svg> 加动画，导致云、雨、太阳一起乱动；正确做法是把不同元素（如 <g id="cloud">、<g id="rain">）单独设 class，再分别定义动画。
- 飘动云朵：用
translateX()+ease-in-out循环，位移控制在 ±12px 内，避免跳动感 - 雨滴下落：用
translateY()从顶部到底部，配合opacity淡入淡出，时长建议 0.8–1.2s - 太阳光晕：对
<circle>或<radialGradient>做scale()脉动，幅度 0.95–1.05，周期 3s 左右
SVG 天气图标怎么写才支持 CSS 动画控制
不是所有 SVG 都能被 CSS 动画驱动。必须满足三个条件：内联 SVG（不能 <img src="..."/>）、元素有可选中 class 或 ID、样式未被 style="..." 内联覆盖。
推荐结构示例：
<svg viewBox="0 0 64 64" class="weather-icon"> <g class="cloud">...</g> <g class="rain">...</g> <circle class="sun-glow" cx="32" cy="32" r="16"/> </svg>
- 避免用
fill="#fff"这类内联属性，改用 CSS 控制颜色，方便主题切换 - 动画元素不要用
display: none隐藏，用opacity: 0+pointer-events: none更稳妥 - IE 不支持 SVG 中的 CSS 动画，如需兼容，得 fallback 到 PNG + JS 动画
如何按天气类型动态切换动画（晴/雨/雪）
核心是用 JS 切换容器 class，再靠 CSS 规则控制子元素显隐和动画开关，而不是反复插入新 SVG。
立即学习“前端免费学习笔记（深入）”；
比如：<div class="weather-display weather-rain"><svg>...</svg></div>，然后写：
.weather-rain .cloud { animation: drift 25s infinite ease-in-out; }
.weather-rain .rain { animation: fall 1s infinite linear; }
.weather-snow .snowflake { animation: flutter 4s infinite ease-in; }
- 每种天气只启用对应元素的动画，其他保持静止或
animation-play-state: paused - 避免同时开多个
transform动画（如云飘 + 雨落 + 风旋转），低端设备容易掉帧 - 用
will-change: transform提前提示浏览器优化，但仅加在真正动画的元素上，别滥用
为什么动画一加载就闪一下，或者移动端卡顿
多数是渲染层没对齐导致的重绘抖动，尤其在 iOS Safari 上明显。
- 确保动画元素有
transform: translateZ(0)或backface-visibility: hidden，触发 GPU 加速 - 避免在动画中改变
width/height/left/top，这些会触发 layout；一律用transform和opacity - 雨滴数量别超过 12 个，雪片别超 20 个，太多 DOM 节点叠加动画会吃内存
- 用
prefers-reduced-motion: reduce媒体查询关掉动画，对无障碍友好
最常被忽略的是 SVG 的 viewBox 和容器尺寸不匹配，导致缩放后像素对齐失准，动画边缘发虚——固定 width 和 height 并用 preserveAspectRatio="xMidYMid meet" 能稳住。
