如何实现CSS linear gradient背景的长时间平滑过渡，模拟天空昼夜变化？

要实现线性渐变背景随时间平滑变化且适配不同时段时长的效果，核心是结合CSS变量和关键帧动画，配合JavaScript动态控制动画参数，具体方案如下：

1. 基础CSS结构 #

用CSS变量存储渐变的起始/结束颜色及动画时长，通过关键帧定义渐变的过渡过程：

.sky-container {
  width: 100%;
  height: 100vh;
  /* 绑定动画，时长和渐变参数由变量控制 */
  animation: sky-transition var(--animation-duration) linear forwards;
}

@keyframes sky-transition {
  0% {
    background: linear-gradient(to bottom, var(--start-top), var(--start-bottom));
  }
  100% {
    background: linear-gradient(to bottom, var(--end-top), var(--end-bottom));
  }
}

/* 初始变量（可通过JS覆盖） */
:root {
  --start-top: #ff0000;
  --start-bottom: #0000ff;
  --end-top: #ffff00;
  --end-bottom: #800080;
  --animation-duration: 600s; /* 10分钟，单位支持s/ms */
}

2. 动态控制动画参数 #

利用你已有的时段判断逻辑，通过JavaScript修改CSS变量，实现不同时段的渐变过渡：

核心逻辑： #

• 承接上一时段的结束颜色作为当前动画的起始颜色，避免突变
• 根据当前时段的实际时长设置动画时长
• 重置动画以应用新参数

示例JS代码：

const skyContainer = document.querySelector('.sky-container');

// 假设你已获取当前时段数据：currentPeriod（包含结束颜色、时长等）
// 1. 获取上一时段的结束颜色（或当前容器的渐变颜色）
function getCurrentGradientColors() {
  const bgImage = getComputedStyle(skyContainer).backgroundImage;
  const colorMatch = bgImage.match(/linear-gradient\(to bottom, (#[0-9a-fA-F]+), (#[0-9a-fA-F]+)\)/);
  return colorMatch ? { top: colorMatch[1], bottom: colorMatch[2] } : { top: '#000', bottom: '#000' };
}

const prevColors = getCurrentGradientColors();

// 2. 设置当前时段的动画参数
skyContainer.style.setProperty('--start-top', prevColors.top);
skyContainer.style.setProperty('--start-bottom', prevColors.bottom);
skyContainer.style.setProperty('--end-top', currentPeriod.endTopColor);
skyContainer.style.setProperty('--end-bottom', currentPeriod.endBottomColor);
// 时长转换为秒（比如30分钟=1800s）
skyContainer.style.setProperty('--animation-duration', `${currentPeriod.duration * 60}s`);

// 3. 重置动画（触发重绘以应用新参数）
skyContainer.classList.remove('sky-container');
void skyContainer.offsetWidth; // 强制浏览器重绘
skyContainer.classList.add('sky-container');

3. 优化细节 #

• 细腻度提升：如果需要更真实的天空变化，可在@keyframes中添加更多关键帧（比如日出时段增加30%、60%的中间渐变状态）
• 兼容性：现代浏览器（Chrome/Firefox/Edge）均支持background-image动画和CSS变量，无需额外兼容处理
• 调试技巧：测试时可将时长缩短为秒级（比如10s），快速验证过渡效果

内容的提问来源于stack exchange，提问作者FeX Nice