元素下面的CSS动画和垂直居中

Question

我想实现以下目标：

• cloud1 div高于welcome-section div并移动到其他子元素之下而不影响其他子元素的位置来自Z轴视角 - 请参阅我想要实现的图像。
• cloud1将成为受欢迎的中心 - 来自Y轴的视角。

我只是在完成了很多工作之后才实现了这个目标，但是不能像我上面提到的那样 - 我最后添加了一个演示。

<div class="welcome-section">
  <div id="cloud1"></div>
  <div fxLayout="column" fxLayoutAlign="center center">
    <h1 style="text-align: center;">THE BEST IS YET TO COME</h1>
    <h2 style="text-align: center;" fxFlexOffset="50px">USE IT TO DO ANYTHING</h2>
    <button mat-raised-button fxFlexOffset="25px">TRY IT FOR FREE</button>
    <img class="recycle-image" src="https://cdn2.iconfinder.com/data/icons/flat-jewels-icon-set/512/0000_Refresh.png" alt="Computer Hope" fxFlexOffset="25px">
  </div>
</div>

CSS：

#cloud1{
  width:300px;
  height:100px;
  background:#cb239e;
  margin:140px 0 0 0;
  border-radius:50px;
  -webkit-transform:translateX(-400px);
  transform:translateX(-400px);
  -webkit-animation: move 7s linear infinite;
  animation: move 7s linear infinite ;
  display:block-inline;
  position: relative;

}
#cloud1:before{
  content:"";
  position: relative;
  width:180px;
  height:180px;
  background:#cb239e;
  border-radius:50%;
  margin:-100px 0 0 20px;

}
#cloud1:after{
  content:"";
  position: absolute;
  width:120px;
  height:120px;
  background:#cb239e;
  border-radius:50%;
  margin:-60px 0 0 165px;

}

我也做了一个demo。

我想要实现的输出：真的很感激任何帮助。

Answer 1

 p {
  font-family: Lato;
}

.welcome-section {
  width: 100%;
  min-height: 400px;
  height: auto;
  background: #3f51b5;
  background-size: auto auto;
  margin-bottom: 50px;
  z-index: -1;
}
.welcome-section h1,
.welcome-section h2,
.welcome-section button,
.welcome-section img{
  z-index: 1;
}
#cloud1{
  position: absolute;
  top: 25%;
  width:300px;
  height:100px;
  background:#cb239e;
  margin:140px 0 0 0;
  border-radius:50px;
  -webkit-transform:translateX(-400px);
  transform:translateX(-400px);
  -webkit-animation: move 7s linear infinite;
  animation: move 7s linear infinite ;
  display: flex;
  // overflow-x: auto;
  z-index: 0;
}
#cloud1:before{
  content:"";
  position: relative;
  width:180px;
  height:180px;
  background:#cb239e;
  border-radius:50%;
  margin:-100px 0 0 20px;

}
#cloud1:after{
  content:"";
  position: absolute;
  width:120px;
  height:120px;
  background:#cb239e;
  border-radius:50%;
  margin:-60px 0 0 165px;

}

@-webkit-keyframes move {
  0%{-webkit-transform:translateX(-340px);opacity:0;}
  20%{opacity:1;}
  90%{opacity:1;}
  100%{-webkit-transform:translateX(1650px);opacity:0;}
}
@keyframes move {
  0%{-webkit-transform:translateX(-340px);opacity:0;}
  20%{opacity:1;}
  90%{opacity:1;}
  100%{-webkit-transform:translateX(1650px);opacity:0;}
}

img.recycle-image {
  width: 250px;
}