7b2美化-登陆弹窗美化
代码放到css样式
代码语言:javascript复制/* 登录弹窗美化*/
.login-box-content:before {
content: "登录木子资源屋体验以下优质内容 "; /*自定义标题*/
color: #fff; /*文本颜色*/
background-color: #3385ff; /*自定义背景颜色*/
background-image: url(#); /*登录页弹出框右下角特色图*/
position: absolute;
padding: 50px 30px;
font-size: 1.4em;
width: 25rem;
height: 75%; /*自定义高度,兼容火狐浏览器*/
height: -webkit-fill-available;
left: -24rem;
background-position: 145px bottom;
background-repeat: no-repeat;
border-radius: 10px 0 0 10px;
z-index: -1;
}
.login-title:before,
.login-title:after,
.login-title span:before,
.login-title span:after
{
position: absolute;
left: 0;
margin-left: -20.7rem;
color: #fff; /*文本颜色*/
}
.login-title:before {
content: "圈子 · 全新的资源互动模式";
margin-top: 2em;
}
.login-title:after {
content: "快讯 · 呈现最新的科技动态";
margin-top: 4em;
}
.login-title span:before {
content: "商城 · 诸多商品全新上线";
margin-top: 5.2em;
}
.login-title span:after {
content: "会员 · 体验尊享特权";
margin-top: 7.2em;
}
.login-box-content {
width: 25rem;
left: 12.5rem;
overflow: inherit;
}
.login-box-content .login-box-top {
padding: 50px 30px 30px;
border-radius: 10px;
}
.login-box-content .login-box-top {
background-image: none;
}
@media (max-width: 800px) {
.login-box-content:before {
display: none;
}
.login-title:before,
.login-title:after,
.login-title span:before,
.login-title span:after {
display: none;
}
.modal-content {
width: 21rem;
left: auto;
}
}
/* 登录弹窗美化*/
文章来自小狐狸资源网
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。