屏幕底部日出日落动画：溢出滚动条及路径偏移问题求助

我来帮你搞定这两个问题，咱们一个个拆解解决：

问题一：太阳移出屏幕时出现垂直滚动条 #

这个问题的核心是太阳元素的移动触发了页面溢出，导致浏览器自动显示滚动条。咱们通过两步就能解决：

1. 给根元素和body设置溢出隐藏，确保页面不会因为元素超出视口而出现滚动条：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 关键：隐藏所有超出视口的内容 */
  height: 100vh; /* 确保body占满整个视口高度 */
}

2. 给太阳元素使用fixed定位，让它完全脱离文档流，移动时不会影响页面的布局计算：

.sun {
  position: fixed; /* 始终相对于视口定位 */
  top: 0;
  left: 0;
  z-index: 9999; /* 保证太阳显示在所有内容上方 */
  /* 其他样式：尺寸、背景色等 */
}

问题二：太阳运动路径偏移，未处于视口正中央 #

这个问题大多是因为动画关键帧的定位没考虑太阳自身的尺寸，或是用了固定像素值导致适配失效。咱们这样调整：

1. 使用视口单位（vw/vh）定义关键帧位置，再通过translate(-50%, -50%)让太阳的中心点精准对准目标位置：

@keyframes sunriseSunset {
  0% {
    /* 起始点：视口左侧外部，垂直居中 */
    transform: translate(calc(-100% - 20px), 50vh) translate(-50%, -50%);
  }
  50% {
    /* 中间点：视口正中央 */
    transform: translate(50vw, 50vh) translate(-50%, -50%);
  }
  100% {
    /* 结束点：视口右下角外部 */
    transform: translate(calc(100vw + 20px), calc(100vh + 20px)) translate(-50%, -50%);
  }
}

2. 补充设置transform-origin: center，确保所有变换操作始终围绕太阳中心进行（和上面的translate配合，双重保障中心对齐）：

.sun {
  transform-origin: center;
}

把这些修改整合后，你的动画就能完美运行了——太阳会平滑地从左侧外移入视口中央，再移到右下角外，全程不会出现滚动条，路径也精准对准视口中心。

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