7b2美化-登陆弹窗美化

代码放到css样式

/* 登录弹窗美化*/
.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;
  }
}
 /* 登录弹窗美化*/

文章来自小狐狸资源网