今天需要做一个弹出框，右下角提示的那种 ，看了一两个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实现 动画下沉效果。
喜欢的朋友可以直接拷贝过去参考下~
几乎纯css实现弹出框
原文地址：https://www.cnblogs.com/wobeinianqing/p/10618669.html