我试图将两个元素绝对居中放置在页面中间,一个在另一个之后。目的是使页面完全响应,中间有一个圆圈,后面有脉冲效果。
以下的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/