html:
<div class="black-and-white-b">
<div class="hintBox"></div>
</div>
css:
.black-and-white-b {
transform: translate3d(-50%, -50%, 0);
position: fixed;
top: 30%;
left: 50%;
display: none;
z-index: 200;
.hintBox {
animation: hint 2s 0s 1 ease forwards;
// height: .6rem;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
padding: 10rem / @r 20rem / @r;
font-size: 12rem / @r;
line-height: 0.6rem;
@keyframes hint {
0% {
transform: scale(0.5);
opacity: 1;
}
30% {
transform: scale(1);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
}
}
js:
//顯示
$('.hintBox').text("網絡錯誤,請稍後重試!");
$(".black-and-white-b").css("display","block")
//監聽動畫完成
$(".black-and-white-b").on("webkitAnimationEnd",function(){
return $(".black-and-white-b").hide()
})