纯css实现半透明的登录页效果

纯 css 实现半透明的登录页效果,时间匆匆,有很多地方还需要完善,该登入界面只涉及 HTML 和 CSS,暂时不涉及 javascript;下来看一下效果图

纯 css 实现半透明的登录页效果

HTML 代码

<div class="bg-div"></div>
<div class="signin">
<img class="user-avater" src="img/user-4.png" />
<div class="box">
<form class="signin-form" method="post">
<div>
<input class="form-control form-input" placeholder="用户名" type="text" name="name" />
</div>
<div class="" style="margin: 20px 0;">
<input class="form-control form-input" placeholder="密 码" type="password" name="password" />
</div>
<div class="save-div">
<input type="checkbox" class="save-checkbox" checked/>
<span class="save-pass">记住密码</span>
<span class="save-text">*&nbsp;密码将保存一天</span>
</div>
<input type="submit" class="btn btn-primary btn-submit" value="登&nbsp;&nbsp;录">
<span class="signup">还没有账户,立即<a class="signup-a" href="#">注册</a></span>
</form>
</div>
</div>

Css 样式

html,
body {
height: 100%;
margin: 0;
padding: 0;
}

.bg-div {
/*background: url(img/bg2.jpg) center;*/
background: blue;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

.signin {
width: 100%;
height: 100%;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.user-avater {
border-radius: 50%;
border: 4px solid #fff;
}

.box {
width: 400px;
color: #666;
text-align: center;
margin-top: 30px;
margin-bottom: 100px;
border-radius: 4px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top: 0;
position: relative;
}

.box::after {
content: '';
display: block;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -21px;
border-top-left-radius: 4px;
border-left: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid rgba(255, 255, 255, 0.3);
transform: rotate(45deg);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.box::before {
content: '';
display: block;
width: 400px;
height: 2px;
position: absolute;
/* margin: -199px 199px; */
border-top-left-radius: 4px;
/* transform: rotate(90deg); */
box-shadow: inset 171px 0 0 0 rgba(255, 255, 255, 0.2), inset -171px 0 0 0 rgba(255, 255, 255, 0.2);
}

.signin-form {
height: calc(100% - 40px);
padding: 20px;
}

.btn {
color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 13px;
line-height: 1.42857143;
border-radius: 0px;
-webkit-user-select: none;
}

.btn-submit {
width: 360px;
height: 40px;
background-color: #3B89F5;
border-color: #3B89F5;
margin-top: 20px;
}

.btn-submit:hover {
color: #fff;
background-color: #0C6CED;
border-color: #0C6CED;
text-decoration: none;
}

input::-webkit-input-placeholder {
color: #242424;
}

/*去除自动填充黄色背景*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

.form-control {
display: block;
width: 100%;
height: 40px;
padding: 6px 12px;
font-size: 15px;
line-height: 1.42857143;
color: #fff;
box-sizing: border-box;
}

.form-control:focus {
border-color: rgba(59, 137, 245, 0.5);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(59, 137, 245, 0.6);
}

.form-input {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.2);
}

.save-div {
color: #fff;
font-weight: bold;
}

.save-checkbox {
float: left;
}

.save-pass {
float: left;
}

.save-text {
float: right;
color: #DD4B39;
}

.signup {
font-weight: 400;
font-size: 13px;
color: #fff;
margin-top: 8px;
display: block;
}

.signup-a {
color: #468BEA;
font-weight: bold;
}

以上就是纯 css 实现的半透明登录页效果的全部代码,欢迎转载,转载请留下原文链接,谢谢!

「点点赞赏,手留余香」

4

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 纯css实现半透明的登录页效果

发表回复