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

纯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实现的半透明登录页效果的全部代码,欢迎转载,转载请留下原文链接,谢谢!

未经允许不得转载:码云笔记 » 纯css实现半透明的登录页效果
喜欢(0) 打赏

评论抢沙发

评论前必须登录!

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

支付宝扫一扫打赏

微信扫一扫打赏