代码之家 › 专栏 › 技术社区 › Mike Me

CSS动画位于元素下方并垂直居中

animation css html

Mike Me · 技术社区 · 6 年前

我想实现以下目标:

-请看我想要达到的附加图像
从Y轴的角度来看,cloud1位于欢迎区的中心。

<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 .

任何帮助都将不胜感激。

1 回复 | 直到 6 年前

Jignesh Sanghani 6 年前

 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;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前