.sun-light { position: absolute; top: 230px; left: 220px; display: flex; width: 200px; height: 200px; background-color: pink; } .sun-line { height: 100px;//光线长度 width: 10px;//光线宽度 background-color: yellow; }为什么sun-line没有显示

根据你提供的代码，.sun-line 是一个没有内容的 div，所以默认情况下它是没有高度的。要让它显示出来，你需要为其添加内容或者设置其高度。可以尝试给 .sun-line 添加以下样式：

.sun-line {
  height: 100px;
  width: 10px;
  background-color: yellow;
  display: block;
}

另外，你需要确保 .sun-line 元素被正确地放置在 .sun-light 元素内部，并且 .sun-light 元素的位置和尺寸是正确的。

相关问题

@keyframes shot { 0% { transform: rotate(215deg) translate(0, 0); } 100% { transform: rotate(215deg) translate(20px, -300px); } }.sun-light { position: absolute; top: 90px; left: 330px; display: flex; width: 200px; height: 200px; background-color: pink; border-radius: 50%; transform: rotate(215deg); overflow: hidden; animation: shot 2s 5; } 如何让我的动画元素执行完动画后不返回原来位置

您可以在动画结束后添加`animation-fill-mode: forwards;`属性，这将使动画元素在动画结束后保持在最后一个关键帧的状态，而不是返回原来的位置。例如：

.sun-light {
  position: absolute;
  top: 90px;
  left: 330px;
  display: flex;
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50%;
  transform: rotate(215deg);
  overflow: hidden;
  animation: shot 2s 5;
  animation-fill-mode: forwards;
}

这样，在动画完成后，`.sun-light`元素将保持在最后一个关键帧的位置，而不会返回原来的位置。