如何在CSS和HTML中将动画分层到另一个动画后面？

我正在努力弄清楚如何对2种不同的动画进行分层。我想在动月亮动画和网站图块的后面制作闪烁的星星动画（以便背景本质上是带有活动的月亮的闪烁星星）。现在，它仅位于月球动画和标题之上，完全覆盖了它们，并且位置已关闭。我是HTML的新手，所以如果我的问题很明显，请原谅。 TIA

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(.png) repeat top center;
  z-index: -1;
}

.twinkling {
  background: transparent url(.png) repeat top center;
  z-index: 0;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
}

div {
  background: none;
  z-index: 1;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<html>
<style>
  div {
    margin: 10%;
  }
</style>

<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>

</html>
回答如下：

此z-index和CSS调整将解决您的问题。

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

html {
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
  color: #fff;
  position: relative;
  margin:0;
  padding:0;
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials/demos/360/images/stars.png) top center;
  background-size: cover;
  z-index: -1;
  width: 100%;
}

.twinkling {
  background: transparent url(http://www.script-tutorials/demos/360/images/twinkling.png) repeat top center;
  z-index: -1;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

.moon {
  z-index: 1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #000000;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>
</html>

如何在CSS和HTML中将动画分层到另一个动画后面？

我正在努力弄清楚如何对2种不同的动画进行分层。我想在动月亮动画和网站图块的后面制作闪烁的星星动画（以便背景本质上是带有活动的月亮的闪烁星星）。现在，它仅位于月球动画和标题之上，完全覆盖了它们，并且位置已关闭。我是HTML的新手，所以如果我的问题很明显，请原谅。 TIA

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(.png) repeat top center;
  z-index: -1;
}

.twinkling {
  background: transparent url(.png) repeat top center;
  z-index: 0;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

html {
  z-index: -1;
  position: relative;
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
}

div {
  background: none;
  z-index: 1;
}

.moon {
  z-index: -1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #0a0a0a;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<html>
<style>
  div {
    margin: 10%;
  }
</style>

<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>

</html>
回答如下：

此z-index和CSS调整将解决您的问题。

@keyframes moon {
  0% {
    box-shadow: -150px 0px 0px 0px white;
    transform: rotate(-10deg);
  }
  50% {
    box-shadow: 0px 0px 0px 0px white;
  }
  100% {
    box-shadow: 150px 0px 0px 0px white;
    transform: rotate(10deg);
  }
  z-index: -1;
  position: relative;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

html {
  background-image: linear-gradient(black 80%, #041931, #fff);
  background-repeat: no-repeat;
  height: 45%;
}

body {
  font-family: 'Manrope', sans-serif;
  background: none;
  color: #fff;
  position: relative;
  margin:0;
  padding:0;
}

.stars,
.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials/demos/360/images/stars.png) top center;
  background-size: cover;
  z-index: -1;
  width: 100%;
}

.twinkling {
  background: transparent url(http://www.script-tutorials/demos/360/images/twinkling.png) repeat top center;
  z-index: -1;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

.moon {
  z-index: 1;
  position: relative;
  width: 10rem;
  height: 10rem;
  background: #000000;
  margin: 1rem auto;
  animation: moon 20s linear infinite alternate;
  border-radius: 50%;
  box-shadow: inset -10rem 0 whitesmoke;
  transform: rotate(-10deg);
}
<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 id="text">
    <center> Welcome to my Site! </center>
  </h1>
  <div class="moon"></div>
  <div class="stars"></div>
  <div class="twinkling"></div>
  <div class="maintext">
    <h2>This is text below the animations</h2>
  </div>
  <script type="text/javascript">
    setTimeout(function() {
      $('.moon').css("animation-play-state", "paused");
    }, 20000)
  </script>
</body>
</html>