h5页面用线性渐变模拟日出到正午光线过渡，需按方向（to top→to top left→to bottom）、三层色标（橙红#ff6b35→浅金微青#ffd166→#a8dadc→冷白#e6f7ff）及伪元素半透层叠加实现自然光感。
在 H5 页面中用线性渐变模拟日出到正午的光线过渡，核心不是“从黄变白”，而是通过 linear-gradient 控制明度与色相的渐进变化，配合方向、位置和透明度分层，还原自然天光由暖低沉→清亮高照的视觉节奏。
方向与角度决定光照逻辑
日出时阳光斜射，正午趋近垂直——这直接影响渐变方向：
- 日出阶段（地平线刚露光）：用
to top或180deg，让暖色从底部向上柔和推升，模拟晨光漫入 - 过渡阶段（太阳升至半空）：角度逐步调至
to top left或135deg，引入轻微侧向光感 - 正午阶段（顶光主导）：切为
to bottom或0deg，让明亮冷调从顶部直压而下，增强通透感
颜色停靠点要分三层节奏
单靠两个色标会生硬。推荐至少三个关键节点，对应真实天光阶段：
-
0%（地平线处）：橙红偏暗（如
#ff6b35），带轻微棕调，避免荧光感 -
60%（中空区域）：浅金微青（如
#ffd166→#a8dadc过渡），体现阳光穿透大气后的散射蓝调 -
100%（天顶）：高明度冷白（如
#e6f7ff或hsl(205, 50%, 95%)），不选纯白（#fff），防止刺眼失真
叠加透明层强化空气感
真实晨光有薄雾与尘埃散射，纯渐变太“干净”。可用伪元素叠加一层半透明白色渐变：
- 主容器设背景：
background: linear-gradient(to top, #e6f7ff, #a8dadc, #ff6b35); - ::before 伪元素覆盖其上：
background: linear-gradient(to top, rgba(255,255,255,0.1), transparent 70%); - 设置
pointer-events: none，确保不影响交互
响应式适配与性能注意
移动端视口小，渐变易被压缩失真：
- 用
vmin单位控制容器高度（如min-height: 100vh;），避免因横屏/刘海屏导致渐变裁切 - 禁用
background-attachment: fixed，否则滚动时渐变会“卡住”，违背自然光照移动逻辑 - 若需动画过渡（如点击切换日出→正午），用
transition: background 4s ease-in-out，不要用 JS 逐帧重写 style
