将圆圈隐藏在其他 div 内并制作线条曲线答案

【问题标题】：Hide the circle inside other div and make the line curve将圆圈隐藏在其他 div 内并制作线条曲线
【发布时间】：2022-01-27 05:53:48
【问题描述】：

我想让我的#line 像一个拱门一样完全弯曲，我试图在太阳越过这条线后隐藏它，但我的代码不起作用。我试图隐藏它的可见性，但它不起作用。

body {
  background-color : rgb(22, 19, 20);
  }
#sun {
  background-color          : orange;
  top                       : 45%;
  height                    : 100px;
  width                     : 14%;
  position                  : relative;
  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;
  }
#line {
  width            : 50%;
  position         : relative;
  top              : 50%;
  left             : 23%;
  height           : 10px;
  border-radius    : 3px 10px 3px;
  background-color : rgb(65, 183, 212);
  }
@keyframes sunset {
  0%   { top : 47%; }
  25%  { top : 49%; }
  75%  { top : 50%; }
  100% { top : 53%; visibility : hidden; }
  }
#h{
  display  : block;
  position : fixed;
  z-index  : 2;
  height   : 200px;
  top      : 50%;
  left     : 23%;
  }

<div id="sun" > </div>
<div id="line"> </div>
<div id="h"   > </div>

【问题讨论】：

线弯曲如何？并且这条线已经覆盖了“太阳”......问题不清楚
我怀疑这只能用 css 来完成。也许在 SVG 中......？
我已经提交了答案，请查看。更新了 CSS sn-p 以实现一些曲线。

标签： css css-animations

【解决方案1】：

这是一个简单的技巧：

为您的#line 添加边框顶部，宽度为 10 像素，颜色由您选择。
将#line 的高度从 10 像素增加到 500 像素，将宽度增加到 700 像素。（根据您的喜好）
为#line 应用黑色背景色。
要弯曲线条，请使用 50% 的边界半径

*如果您确定背景将保持黑色，这将起作用，否则您必须使用 JS 更新 bg-color。

#line {
  position: relative;
  top: 50%;
  left: 23%;
  height: 500px;
  width: 700px;
  border-radius: 50%;
  border-top: 10px solid #30c4d8;
  background-color: rgb(22 19 20);
}

【讨论】：