效果：
代码：
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);
}
网友评论