如何将圆形隐藏在其他div内并实现#line元素的拱形弯曲效果

问题原因&解决方法 #

1. 拱形line的实现 #

你原来的border-radius参数无法实现拱形效果，可通过上边框+定向圆角的方案实现，修改#line样式即可：

#line {
  width            : 50%;
  position         : relative;
  top              : 50%;
  left             : 23%;
  /* 替换原有height配置，用border实现拱形线条 */
  border-top: 10px solid rgb(65, 183, 212);
  /* 仅上半部分做大圆角，形成拱形效果 */
  border-radius    : 50% / 100% 100% 0 0;
  height: 60px; /* 调整这个数值可以控制拱形的弯曲高度 */
  background: transparent;
  z-index: 3; /* 保证层级在sun元素上方 */
}

2. sun元素隐藏逻辑修复 #

你设置的visibility: hidden不生效有两个核心原因：

• 仅在100%关键帧设置了隐藏属性，动画无限循环时会瞬间跳回0%的默认visible状态，隐藏效果仅持续一帧，肉眼无法感知
• 元素层级关系错误，sun默认在其他元素上层，就算设置隐藏也达不到藏到div内部的效果

最优解决方案是利用overflow: hidden实现自动裁剪：

• 把#sun元素放到#h容器内部
• 给#h设置overflow: hidden，sun移动到#h容器范围外时会自动被裁剪隐藏，不需要单独控制visibility属性
• 调整层级保证#h和#line在sun元素上层

3. 完整可运行修改后代码 #

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color : rgb(22, 19, 20);
  margin: 0;
  height: 100vh;
}
#sun {
  background-color          : orange;
  top                       : 47%;
  height                    : 100px;
  width                     : 14%;
  position                  : absolute;
  left                      : 39%;
  border-radius             : 50%;
  box-shadow                : 5px 5px 10px 5px red;
  animation-name            : sunset;
  animation-duration        : 5s;
  animation-timing-function : linear;
  animation-iteration-count : infinite;
  z-index: 1;
}
#line {
  width            : 50%;
  position         : absolute;
  top              : 50%;
  left             : 23%;
  border-top: 10px solid rgb(65, 183, 212);
  border-radius    : 50% / 100% 100% 0 0;
  height: 60px;
  background: transparent;
  z-index: 3;
}
@keyframes sunset {
  0%   { top : 47%; }
  100% { top : 100%; }
}
#h{
  display  : block;
  position : fixed;
  z-index  : 2;
  height   : calc(50% + 60px);
  top      : 0;
  left     : 0;
  width: 100%;
  overflow: hidden;
}
</style>
</head>
<body>
<div id="h">
  <div id="sun" ></div>
</div>
<div id="line"> </div>
</body>
</html>

效果说明 #

• line为完整向上拱形，弯曲高度可通过调整#line的height属性自定义
• sun放在#h容器内，#h设置了overflow:hidden，sun移动到拱形下方后会自动被裁剪隐藏，完全符合"藏到其他div内部"的需求
• 去掉了冗余的visibility配置，靠容器裁剪实现自动隐藏，避免了动画循环导致的属性重置问题

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