JS/CSS 在屏幕底部弹出消息--记录

最新推荐文章于 2022-11-04 15:10:39 发布

mister_snail

最新推荐文章于 2022-11-04 15:10:39 发布

阅读量462

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/mister_snail/article/details/108338296

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏


<!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">
      JS/CSS 在屏幕底部弹出消息
    </div>
    <script>
      function myFunction() {
	    var x = document.getElementById("tip")
	    x.className = "show";
	    setTimeout(function(){
	    	x.className = x.className.replace("show", ""); 
	    }, 3000);
	  }
	</script>
  </body>
</html>

mister_snail

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS/CSS 在屏幕底部弹出消息--记录

<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>JS/CSS 在屏幕底部弹出消息</title> <style> #tip { visibility:hidden; width:400px; height:40px; border:1px solid black; .
复制链接

扫一扫