来自运行整个网络 css 的停止线动画

Question

我需要我页面上的动画不会浮起整个页面，而是从关于我的部分上方的边框开始。

Answer 1

一个非常简单的方法是给每个光 z-index: -1 这样它们在超过白色 'header' 之前不会显示。但是不知道是不是你想要的结果

body {
  margin: 0;
  height: 100vh;
  font-weight: 100;
  background: radial-gradient(#24c6dc, #514a9d);
  overflow-y: hidden;
  animation: fadeIn 1 1s ease-out;
}

.light {
  position: absolute;
  width: 1px;
  opacity: .50;
  background-color: beige;
  box-shadow: #07e7e7 0px 0px 20px 2px;
  opacity: 0;
  top: 100vh;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: -1;
}

.x1 {
  animation: floatUp 4s infinite linear;
  transform: scale(1.0);
}

.x2 {
  animation: floatUp 7s infinite linear;
  transform: scale(1.6);
  left: 15%;
}

.x3 {
  animation: floatUp 2.5s infinite linear;
  transform: scale(.5);
  left: -15%;
}

.x4 {
  animation: floatUp 4.5s infinite linear;
  transform: scale(1.2);
  left: -34%;
}

.x5 {
  animation: floatUp 8s infinite linear;
  transform: scale(2.2);
  left: -57%;
}

.x6 {
  animation: floatUp 3s infinite linear;
  transform: scale(.8);
  left: -81%;
}

.x7 {
  animation: floatUp 5.3s infinite linear;
  transform: scale(3.2);
  left: 37%;
}

.x8 {
  animation: floatUp 4.7s infinite linear;
  transform: scale(1.7);
  left: 62%;
}

.x9 {
  animation: floatUp 4.1s infinite linear;
  transform: scale(0.9);
  left: 85%;
}

@keyframes floatUp {
  0% {
    top: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    top: 0vh;
    opacity: .8;
  }
  75% {
    opacity: 1;
  }
  100% {
    top: -100vh;
    opacity: 0;
  }
}

#about-me {
  display: flex;
  text-align: center;
  background: white;
  background-position: absolute;
  padding: 10em;
  margin-top: 20em;
}

<div class="background">

  <button class="btn" href="#">Projects</button>

  <div class="light x1"></div>
  <div class="light x2"></div>
  <div class="light x3"></div>
  <div class="light x4"></div>
  <div class="light x5"></div>
  <div class="light x6"></div>
  <div class="light x7"></div>
  <div class="light x8"></div>
  <div class="light x9"></div>
</div>
<!-- <h1 id="logo">KaizenWB</h1> -->
<nav class="nav-flex">
  <div class="nav-link">
    <a class="page-link" id="#home" href="#">Home</a>
    <a class="page-link" id="#home" href="#">About</a>
    <a class="page-link" id="#home" href="#">Projects</a>
    <a class="page-link" id="#home" href="#">Contact</a>
  </div>
  </ul>
</nav>
<div id="about-me">
  <section>
    <h1>About me</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus voluptatibus animi voluptates molestiae quis consectetur, non nostrum quaerat. Voluptate ipsum suscipit temporibus pariatur doloribus autem, commodi obcaecati esse molestias nam
      aliquid fuga tempora fugiat, exercitationem aliquam et quos dolorum quam! Corrupti unde laborum itaque reprehenderit quos recusandae quae a sequi.
    </p>
  </section>
</div>

来自运行整个网络 css 的停止线动画

Stop line animation from run the whole web css

html

css

css-animations

来自 运行 整个网络 css 的停止线动画

Stop line animation from run the whole web css

html

css

css-animations

来自运行整个网络 css 的停止线动画