我正在研究加载动画。我的问题是,以Flexbox为中心似乎仅在Chrome中正常工作。:before
&:after
位于Firefox的父母div的底部,在Safari的顶部。
#pulse-box {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#pulse {
position: relative;
width: 12.5px;
height: 50px;
animation: pulse 750ms infinite;
animation-delay: 250ms;
display: flex;
justify-content: center;
align-items: center;
}
#pulse:before,
#pulse:after {
content: '';
position: absolute;
display: block;
width: 12.5px;
height: 33.3px;
background: #efefef;
animation: pulse 750ms infinite;
}
#pulse:before {
left: -25px;
/* -(pulse height / 1.5) */
}
#pulse:after {
left: 25px;
/* (pulse height / 1.5) */
animation-delay: 500ms;
}
@keyframes pulse {
0%,
10% {
background: #efefef;
}
50% {
background: #5b5b5b;
}
}
<div id="pulse-box">
<div id="pulse" />
</div>
您也可以在我制作的JSfiddle中看到这一点。
给这个GO ...
#pulse::before, #pulse::after {
content: '';
position: absolute;
display: block;
width: 12.5px;
height: 33.3px;
background: #efefef;
animation: pulse 750ms infinite;
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/opt4jmmt/