我试图绝对将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.
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值,我想远离它).
期望的效果：
This is close,但是如果可能的话,我想放弃使用：after元素的px值.
解决方法
不确定是否会这样做,但你可以简单地添加到你的：之后
position: absolute; top : 0; left : 0; bottom: 0; right : 0;
小提琴：http://jsfiddle.net/ccyd6xh1/
更新是一个快速草案,并没有绝对响应.如果你想要效果真正遵循你的球体及其大小,你应该在球体元素而不是它的容器上添加：after,并使用％width和height(这里辉光增长到球体大小的130％)：
