CSS实现tost弹窗效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40028324/article/details/83409609

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()
    })