码云笔记前端博客
Home > HTML/CSS > 纯css实现半透明的登录页效果

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

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

本文共计2903个字,预计阅读时长需要8分钟。

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(4) 打赏

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

支付宝
微信
4

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

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

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 456 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 15 个
  • 标签总数: 1009 个
  • 建站时间: 494 天
  • 访问总量: 8652508 次
  • 最近更新: 2019年10月21日