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 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>