纯CSS可实现日出日落弧线动画：通过旋转容器+反向微调太阳位置模拟圆弧轨迹，配合分段cubic-bezier缓动、transform-origin精准控制、.sky舞台定位及移动端视口适配，达成自然流畅的视觉效果。
用 CSS 动画模拟日出日落的弧线轨迹
纯 HTML + CSS 就能实现平滑的日出日落动画，关键不是“画弧线”，而是用 transform: translate() 配合 rotate() 或贝塞尔缓动，让元素沿视觉上的圆弧路径运动。浏览器不支持原生弧线位移动画，所以得靠数学近似或分段曲线拟合。
最实用的做法是：把太阳（<div class="sun">）放在一个旋转的容器里，容器绕中心点自转，同时太阳自身反向微调位置——这样人眼看到的就是一段上凸/下凹的弧线。比用 JavaScript 实时计算 <code>top/left 更轻量、更流畅。
常见错误是直接写 animation: move 10s linear 配合 top 和 left 线性变化，结果太阳走的是斜线或折线，完全不像真实日升日落。
- 日出阶段：太阳从左下角沿缓升弧线移至正上方，用
cubic-bezier(0.3, 0.8, 0.5, 1)模拟加速上升 - 日落阶段：从正上方缓降至右下角，用
cubic-bezier(0.5, 0, 0.7, 0.2)模拟减速下沉 - 容器层级必须设
overflow: hidden，否则太阳移出视区时会露边
HTML 结构要满足定位锚点和动画隔离
动画效果是否自然，一半取决于 DOM 结构是否利于控制运动基准点。不能把 .sun 直接丢在 里做绝对定位，那样没法复用、难对齐地平线。
立即学习“前端免费学习笔记（深入）”；
推荐结构是一个固定尺寸的 <div class="sky"> 作为舞台，内部嵌套 <code><div class="horizon">（伪地平线），再用 <code><div class="sun"> 做动画主体。所有定位都基于 <code>.sky 的 position: relative，避免受外部 margin/padding 干扰。
容易被忽略的一点：.sun 的 transform-origin 必须设为 center center，否则旋转时会偏移；如果用了 scale 模拟晨昏大小变化，也要同步调整 transform-origin，否则缩放中心错位。
-
.sky宽高建议设为具体值（如width: 100vw; height: 100vh;），避免 flex 或 grid 自动撑开导致动画坐标漂移 -
.horizon用border-top或伪元素实现，不要用图片，否则响应式时易错位 - 所有动画类名统一加
animate-sun，方便后期用 JS 切换日出/日落状态
用 @keyframes 控制不同时间段的缓动节奏
真实日出日落不是匀速的：刚露出地平线时慢，升到半空变快，接近顶点又略缓；日落同理。CSS 的 @keyframes 可以分段定义，比单个 cubic-bezier() 更精准。
例如日出动画可拆成三段：0%→30%（缓慢抬升）、30%→70%（中速上行）、70%→100%（减速入顶）。每段用不同 transform 组合：translateY() 主控垂直，translateX() 微调水平偏移，再叠加 filter: brightness() 模拟光照增强。
注意：Chrome 和 Safari 对 filter 动画的硬件加速支持不一致，如果发现亮度变化卡顿，改用 opacity + 背景渐变遮罩更稳。
- 日出阶段
keyframes中，0% 时transform: translate(10%, 90%) scale(0.7);，100% 时transform: translate(50%, 20%) scale(1); - 日落阶段反向设置，但起始
scale建议略大于 1（模拟夕照膨胀感），再缩回 1 - 动画时长建议 ≥ 8s，低于 6s 人眼会感知为“闪”而非“动”
移动端适配和性能陷阱
在 iPhone 或安卓小屏上，100vh 可能因地址栏显示/隐藏而跳变，导致太阳突然“坠机”。这不是动画 bug，而是视口高度不稳定。
解决办法是不用 vh 做关键定位单位：把 .sky 的高度用 JS 初始化一次（document.documentElement.clientHeight），存为 CSS 自定义属性（如 --sky-h: 667px），动画里全部用 calc(var(--sky-h) * 0.2) 这类表达式。这样既保持响应式，又避开视口抖动。
另一个高频坑：iOS Safari 对 will-change: transform 的处理较激进，加了反而掉帧。实测只对 .sun 元素加 backface-visibility: hidden 就足够触发 GPU 加速，且兼容性更好。
- 禁用
pointer-events: none在.sun上，否则后续加点击交互（比如暂停动画）会失效 - 动画循环用
animation-iteration-count: infinite，但首次加载时加animation-play-state: paused，等页面就绪再用 JS 改为running，避免闪帧 - 如果需要随真实地理位置切换日出时间，CSS 动画本身做不到，得用 JS 获取
sunrise/sunset时间戳后动态设置animation-delay
真正难的不是让太阳动起来，而是让它动得像自然发生的——起点终点要贴合地平线视觉位置，中间速率变化要符合人眼预期，缩放与亮度变化得同步呼吸。这些细节没对齐，再酷的弧线也显得假。
