html - 如何在加载网站上添加动线？

Question

加佐:https://gyazo.com/015425f0decb187e28b620c1e3206391问题:https://gyazo.com/dfcd33e8a4fd5bea64e51fe40556f0bf

所以我在一个网站上工作，我有一个非常好的想法，当你加载网站时，屏幕上有 2 行。好吧，我已经完成了所有这些工作，但我添加的所有其他内容都遵循这些行，所以我认为代码不是它应该的样子。所以我的问题是:如何在屏幕上画出 2 条线，而不必将其他所有内容都放在 position: absolute 位置。 (我希望代码比我解释得更好)

我玩过很多东西，但我想不通。

#horizontal-line {
  height: 0px;
  width: 2px;
  border-bottom: 1px solid #1e1e1e;
  -webkit-animation: increase 2s;
  -moz-animation: increase 2s;
  animation: increase 2s;
  animation-fill-mode: forwards;
  float: left;
}

@keyframes increase {
  100% {
    width: 100%;
  }
}

#vertical-line {
  height: 0px;
  width: 2px;
  border-left: 1px solid #1e1e1e;
  -webkit-animation: increaseV 2s;
  -moz-animation: increaseV 2s;
  animation: increaseV 2s;
  animation-fill-mode: forwards;
  float: right;
  margin-right: 25%;
  margin-top: -120px;
}

@keyframes increaseV {
  100% {
    height: 850px;
  }
}

<div id="horizontal-line"></div>
<div id="vertical-line"></div>

我希望有人知道让线条相互交叉的更好方法，或者知道代码中有什么问题。我真的很感激!

Answer 1

您的代码中的问题在于，您添加的行与页面其余内容处于同一“级别”(z-index)。为避免这种情况，您可以将行的 z-index 设置为 1，并将位置设置为固定。垂直线需要添加right: 0属性，使其向右移动；

#horizontal-line {
  height: 0px;
  width: 2px;
  border-bottom: 1px solid #1e1e1e;
  -webkit-animation: increase 2s;
  -moz-animation: increase 2s;
  animation: increase 2s;
  animation-fill-mode: forwards;
  float: left;
  position: fixed;
  z-index: 1;
}

@keyframes increase {
  100% {
    width: 100%;
  }
}

#vertical-line {
  height: 0px;
  width: 2px;
  border-left: 1px solid #1e1e1e;
  -webkit-animation: increaseV 2s;
  -moz-animation: increaseV 2s;
  animation: increaseV 2s;
  animation-fill-mode: forwards;
  position: fixed;
  float: right;
  margin-right: 25%;
  right: 0;
  z-index: 1;
  margin-top: -120px;
}

@keyframes increaseV {
  100% {
    height: 850px;
  }
}

<div id="horizontal-line"></div>
<div id="vertical-line"></div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" width="200px"/>