html:javascript
<div class="black-and-white-b"> <div class="hintBox"></div> </div>
css: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:html
//显示 $('.hintBox').text("网络错误,请稍后重试!"); $(".black-and-white-b").css("display","block") //监听动画完成 $(".black-and-white-b").on("webkitAnimationEnd",function(){ return $(".black-and-white-b").hide() })