今天需要做一个弹出框，右下角提示的那种 ，看了一两个jquery的插件 总是不太满意 。一方面js内容太多，另一方面 不太好配合已经存在的样式使用。所以 就自己用css直接实现了下
效果还可以 。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5桌面通知</title>
<style type="text/css">
.tip {
border: 1px solid #E8E8E8;
border-radius: 2%;
/* background-color: #8D8D8D; */
position: fixed;
width: 400px;
height: 400px;
right: 20px;
bottom: -370px;
-webkit-transition: all 3s;
-webkit-transform: translate(0, -400px);
}
.header{
height: 42px;
line-height: 42px;
padding: 0 15px;
border-bottom: 1px solid #E8E8E8;
color: #333;
border-radius: 2px 2px 0 0;
font-size: 14px;
}
.card-body{
padding: 10px 15px;
line-height: 24px;
}
</style>
</head>
<body>
<div class="layui-card tip" id="tip">
<div class="header">
卡片面板
<span style="margin-left: 280px;"><a href="javascript:void(0);" onclick="_close()">x</a></span>
</div>
<div class="card-body">
卡片式面板面板通常用于非白色背景色的主体内
<br>
从而映衬出边框投影
</div>
</div>
</body>
<script type="text/javascript">
function _close(){
// console.log("123123123");
document.getElementById("tip").style.cssText = "-webkit-transform: translate(0, 50px);";
}
</script>
</html>
严格来说只有3行js内容 ，可以说相当精简了。效果如下：
打开以后自动右下角弹出。
点击“x” 后纯css实现 动画下沉效果。
喜欢的朋友可以直接拷贝过去参考下~
原文地址：https://www.cnblogs.com/wobeinianqing/p/10618669.html
时间： 2024-10-13 16:50:37