我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.
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;
}
}
方法：
我目前正在使用flexbox将容器div置于一个圆圈内部,并在容器上用一个标签来创建脉冲.我尝试过使用z-indexing(似乎没有做任何事情)和绝对定位(需要硬编码的px值,我想远离它).
有没有一种优雅的方法来使用flexbox实现这一目标？
期望的效果：
This is close,但是如果可能的话,我想放弃使用：after元素的px值.