CSS實現tost彈窗效果
阿新 • • 發佈:2018-11-30
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()
})