背景 css 使用关键帧的动画停止联系表单功能

Question

我正在尝试使用 bootstrap + wp 制作一个提交表单，仅使用 css 动画背景，动画工作正常，但是当我将表单创建为相同的div 容器根本不工作。我正在尝试 z-index css 属性，但无法解决问题，看起来动画覆盖了表单。我真的不知道我该如何解决。我想找到表单在动画背景下正常工作的方式。

.space {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: #1B2735;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: white;
  padding-top: 20vh;
}

.stars > div {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars .stars-back {
  top: -50%;
  opacity: 0.5;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars 4s infinite linear;
}

.stars .stars-middle {
  background-image: 
    radial-gradient(3px 3px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 2.5s infinite linear;
}
@keyframes stars {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}

<div class="jumbotron space">
  <div class="stars">
    <div class="stars-back"></div>
    <div class="stars-middle"></div>
    <div class="stars-front"></div>
  </div>
  <h1>Jumbotron heading</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>
</div>

Answer 1

一种方法是将代码包装在父级 div 中并将其位置设置为相对位置，然后将表单元素设置为绝对元素并使用 left 和/或 top 放置它...这将从正常文档流中取出该元素。

.space {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background-color: #1B2735;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  color: white;
  padding-top: 20vh;
}

#parent {
  position: relative;
}

.form {
  color: white;
  position: absolute;
  left: 0;
  top: 40%;
}

.stars>div {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars .stars-back {
  top: -50%;
  opacity: 0.5;
  background-image: radial-gradient(2px 2px at 20px 30px, #eee, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 40px 70px, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 300px 300px;
  animation: stars 4s infinite linear;
}

.stars .stars-middle {
  background-image: radial-gradient(3px 3px at 50px 160px, #ddd, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 2.5s infinite linear;
}

@keyframes stars {
  0% {
    top: -100%;
  }
  100% {
    top: 0;
  }
}

<div id="parent">
  <div class="jumbotron space">
    <div class="stars">
      <div class="stars-back"></div>
      <div class="stars-middle"></div>
      <div class="stars-front"></div>
    </div>
    <h1>Jumbotron heading</h1>
    <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  </div>
  <form class="form-inline form">
    <div class="form-group">
      <label class="sr-only">Email</label>
      <p class="form-control-static">email@example.com</p>
    </div>
    <div class="form-group">
      <label for="inputPassword2" class="sr-only">Password</label>
      <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default">Confirm identity</button>
  </form>
</div>

背景 css 使用关键帧的动画停止联系表单功能

background css animation using keyframe stop the contact form functionalities

html

css

forms

css-animations