元素下方并垂直居中的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;
}