html – 使用CSS flexbox重叠两个居中的元素

发布时间：2020-12-14 18:36:16 所属栏目：资源来源：网络整理

导读：我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果. Here is a fiddle以下： html,body { height: 100%; width: 100%;}body { background: lightblue; display: flex; align-items: center; justif

我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.

Here is a fiddle以下：

html,body {
  height: 100%;
  width: 100%;
}
body {
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sphere {
  display: flex;
  background: black;
  border-radius: 300px;
  height: 100px;
  width: 100px;
}
.container:after {
  display: flex;
  background: #FFF;
  border-radius: 300px;
  height: 130px;
  width: 130px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0;
  content: "";
  z-index: -1;
  margin: auto;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1,0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2,1.2);
    opacity: 0.0;
  }
}

<div class="container">
  <div class="sphere"></div>
</div>

方法：

我目前正在使用flexbox将容器div置于一个圆圈内部,并在容器上用一个标签来创建脉冲.我尝试过使用z-indexing(似乎没有做任何事情)和绝对定位(需要硬编码的px值,我想远离它).

有没有一种优雅的方法来使用flexbox实现这一目标？

期望的效果：

This is close,但是如果可能的话,我想放弃使用：after元素的px值.

解决方法

不确定是否会这样做,但你可以简单地添加到你的：之后

position: absolute;
top   : 0;
left  : 0;
bottom: 0;
right : 0;

小提琴：http://jsfiddle.net/ccyd6xh1/

更新是一个快速草案,并没有绝对响应.如果你想要效果真正遵循你的球体及其大小,你应该在球体元素而不是它的容器上添加：after,并使用％width和height(这里辉光增长到球体大小的130％)：

http://jsfiddle.net/tjoo739y/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!