<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS/CSS 在屏幕底部弹出消息</title>
<style>
#tip {
visibility:hidden;
width:400px;
height:40px;
border:1px solid black;
text-align:center;
padding:10px;
background:black;
color:white;
border-radius:10px;
line-height:40px;
position:absolute;
bottom:30px;
left:30%;
}
#tip.show {
visibility:visible;
animation: fadein 3s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
from{opacity:0;bottom:0;}
to{opacity:1;bottom:30px;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
</style>
</head>
<body>
<button onclick="myFunction()">
点击显示
</button>
<div id="tip">
学好web，可以做精美的网站，和精美的游戏画面
</div>
<script>
function myFunction() {
var x = document.getElementById("tip")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>