flex布局实现叠在另一个div之上_html – 使用CSS flexbox重叠两个居中的元素

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

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;

}<