1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JS/CSS 在屏幕底部弹出消息</title>
6 <style>
7 #tip {
8 visibility:hidden;
9 width:400px;
10 height:40px;
11 border:1px solid black;
12 text-align:center;
13 padding:10px;
14 background:black;
15 color:white;
16 border-radius:10px;
17 line-height:40px;
18 position:absolute;
19 bottom:30px;
20 left:30%;
21 }
22
23 #tip.show {
24 visibility:visible;
25 animation: fadein 3s, fadeout 0.5s 2.5s;
26 }
27
28
29
30 @keyframes fadein {
31 from{opacity:0;bottom:0;}
32 to{opacity:1;bottom:30px;}
33 }
34
35
36 @keyframes fadeout {
37 from {bottom: 30px; opacity: 1;}
38 to {bottom: 0; opacity: 0;}
39 }
40 </style>
41 </head>
42 <body>
43 <button onclick="myFunction()">
44 点击显示
45 </button>
46 <div id="tip">
47 学好web，可以做精美的网站，和精美的游戏画面
48 </div>
49 <script>
50 function myFunction() {
51 var x = document.getElementById("tip")
52 x.className = "show";
53 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
54 }
55 </script>
56 </body>
57 </html>
