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

以下的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居中放置一个圆圈,并在容器上创建一个:after标记以创建脉冲。我尝试使用z-indexing(似乎没有做任何事情)和绝对定位(这需要我想远离的硬编码px值)。

有没有使用flexbox实现此目的的优美方法?

所需效果:

This is close,但我想尽可能避免使用pxt值作为:after元素。

最佳答案

不知道是否会这样做,但是您可以简单地添加到:after

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

fiddle :http://jsfiddle.net/ccyd6xh1/

更新是一个快速草稿,并且不是绝对响应的。如果要使效果真正跟随您的球体及其大小,则应在sphere元素上而不是在其容器上添加:after,并使用%宽度和高度(此处,辉光会增长为球体大小的130%):

http://jsfiddle.net/tjoo739y/

关于html - 使用CSS flexbox将两个居中元素重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32960243/

10-12 12:47
查看更多