在别的网站上看到的 记录下来 加了一些css的解释 目前能用 哈哈哈哈
有些是自己改的，作为一个菜鸟觉得代码里面有些是多余的，但又不知道哪里多余，如果有知道的请在评论区留言改进，谢谢指教
<!DOCTYPE html><html><head><title>弹窗</title><meta charest="UTF-8"><style type="text/css">html,body{margin:0;padding:0;background:#eee;}.popup{position:fixed;/*position 属性规定元素的定位类型。absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit 规定应该从父元素继承 position 属性的值。*/left:37%;top:20%;z-index:2;width:750px;height:800px;margin-left:-250px;margin-top:-150px;display:inline-block;/*display 属性规定元素应该生成的框的类型。none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block 行内块元素。（CSS2.1 新增的值）list-item 此元素会作为列表显示。run-in 此元素会根据上下文作为块级元素或内联元素显示。compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。table-row 此元素会作为一个表格行显示（类似 <tr>）。table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。table-column 此元素会作为一个单元格列显示（类似 <col>）table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）table-caption 此元素会作为一个表格标题显示（类似 <caption>）inherit 规定应该从父元素继承 display 属性的值。*/border-radius:5px;/*为元素添加圆角边框！*/-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;background:#fff;border:1px solid #f1f1f1;overflow:hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit 规定应该从父元素继承 overflow 属性的值。*/box-shadow: 3px 3px 3px #666;/*box-shadow属性可以让我们轻松实现图层阴影效果box-shadow：length length length length colorlength：阴影水平偏移值length：阴影垂直偏移值length：阴影模糊值length：阴影边框color：阴影颜色*/}@keyframes linearTop{0%{-webkit-transform:translate3d(0,800px,0);-moz-transform:translate3d(0,800px,0);-o-transform:translate3d(0,800px,0);transform:translate3d(0,800px,0);opacity:0;filter:alpha(opacity=0);}100% {-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;filter:alpha(opacity=100);}}/*通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。详细解释看https://www.w3school.com.cn/cssref/pr_keyframes.asp*/.animatedIn {-webkit-animation-duration:0.85s;-moz-animation-duration:0.85s;-o-animation-duration:0.85s;animation-duration:0.85s;-webkit-animation-name:linearBottom;-moz-animation-name:linearBottom;-o-animation-name:linearBottom;animation-name:linearTop;}</style></head><body><div id="abc" class="popup animatedIn"><div style="background: #00E3E3;height: 100px;width: 750px; z-index: 99999;position: fixed; font-size: 50px;color: #fff;" align="center"><p style="margin-top: 15px;" > 最 美 中 国 </p></div><div style="margin-left: 10px;margin-right: 10px; margin-top:110px;font-size: 40px;" ><font color="red" >我爱你，中国</font> 中国第一<hr>美丽的<font color="red" >中国</font>风景如画<hr>强大的<font color="red" >中国</font>世界第一<hr>我们的<font color="red" >中国</font>伟大的母亲<hr></div><div align="center" ><button style="border-radius: 50px; width: 400px;height:100px;background: #00E3E3; font-size: 50px; box-shadow: 2px 2px 10px #909090;color: #fff;" onclick="turnoff('abc')" > 我 知 道 了 </button></div></div><script type="text/javascript" >//改变div的css属性function turnoff(obj){document.getElementById(obj).style.display = "none"}</script></body></html>
