Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

方法

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

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

期望的效果：

This is close，但如果可能的话，我希望不再使用:after元素的px值。

Answer 1

不确定是否会这样做，但您可以直接添加到：

之后

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

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

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

http://jsfiddle.net/tjoo739y/

Answer 2

这可以使用position: absolute轻松创建，它会从文档的正常流中删除元素/伪元素，以便它们相互忽略。您可以使用灵活单位，不需要使用px。 flex属性不需要实现这一点。

.sphere元素的高度/宽度为中心。圆圈符合此宽度/高度和位置。
对黑色圆圈使用伪元素是使其与白色脉动圆重叠的最简单方法。这两个圆圈现在都是兄弟姐妹，第二个兄弟姐妹会自然重叠
使用.sphere / top / left / {{1}对bottom的伪元素子项进行拉伸以适合父项的高度和宽度}属性设置为right。
保持此响应的一种方法是使用viewport width unit作为宽度和高度。这将保持高度/宽度1：1。

实施例

＆＃13;

body {
  background: lightblue;
}
.sphere {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  height: 10vw;
  width: 10vw;
}
.sphere:before,
.sphere:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.sphere:before {
  background: #FFF;
  animation: pulsate 2.5s ease-out infinite;
}
.sphere:after {
  background: black;
}
@keyframes pulsate {
  0%, 100% {
    opacity: 0;
  }
  0% {
    transform: scale(0.1, 0.1);
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.5, 1.5);
  }
}

＆＃13;

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

方法

期望的效果：

2 个答案:

实施例