jquery+css实现网站公告弹出层效果代码
代码语言:html
所属分类:弹出层
代码描述:jquery+css实现网站公告弹出层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
-webkit-tap-highlight-color: transparent;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.6;
font-size: 14px;
-webkit-tap-highlight-color: transparent
}
* {
margin: 0;
padding: 0
}
a {
text-decoration: none;
color: #282828;
outline: 0
}
.popup-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10
}
.popup {
display: none;
box-shadow: 0 .25rem .5rem rgba(0,0,0,0.05),0 1.5rem 2.2rem rgba(0,0,0,0.1);
overflow: hidden;
padding: 0 30px;
background: #fff;
width: 350px;
position: fixed;
top: 50%;
left: 50%;
z-index: 999999;
transform: translateX(-50%) translateY(-50%);
margin: 0 auto;
border-radius: 18px;
box-sizing: border-box
}
.popup::after {
content: '';
height: 150px;
width: 120%;
background: #fbeecd;
position: absolute;
bottom: -95px;
left: -10%;
z-index: -1;
border-radius: 50%
}
.popup-header {
text-align: center;
padding: 25px 0 10px
}
.popup-title {
position: relative;
font-size: 20px;
font-weight: 900;
display: inline-block
}
.popup-title::before {
content: '';
position: absolute;
width: 100%;
height: 15px;
left: 0;
background: #fbeecd;
bottom: 3px;
border-radius: 4px;
transform: skewX(-15deg);
z-index: -1
}
.popup-main {
padding-bottom: 10px
}
.pop.........完整代码请登录后点击上方下载按钮下载查看
网友评论0