web实现Snackbar

效果：

代码：

html：

<button id="btn">打开</button>
<div class="msg">
  hello world!!!
</div>

css：

.msg{
  position:fixed;
  min-width:200px;
  padding:15px;
  background:#ee6cad;
  color:#fff;
  box-shadow:0px 0px 7px #ee6cad;
  top:-70px;
  left:50%;
  transform:translate(-50%,0);
  transition:all 0.2s;
}
.msg.open{
  top:0;
  transition:all 0.2s;
}

javascript：

document.getElementById("btn").onclick = function(){
  document.querySelector('.msg').className += " open";
  setTimeout(function(){
    document.querySelector('.msg').className = "msg";
  },2000);
}