web前端开发个人技术博客
当前位置: HTML/CSS > 纯css实现半透明的登录页效果

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

2018-07-11 分类:HTML/CSS 作者:码云 阅读(9002)

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

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

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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实现的半透明登录页效果的全部代码,欢迎转载,转载请留下原文链接,谢谢!

「如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 纯css实现半透明的登录页效果

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流