PC端登录页源码(一键复制)

先看效果 :eye:#

页面源码:eagle:#

紫色登录界面（图一）：#

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>登录1</title>
6
    <style>
7
      * {
8
        margin: 0;
9
        padding: 0;
10
        box-sizing: border-box;
11
      }
12

13
      /* 动态背景 */
14
      @keyframes move {
15
        100% {
16
          transform: translate3d(0, 0, 1px) rotate(360deg);
17
        }
18
      }
19

20
      .background {
21
        position: fixed;
22
        width: 100vw;
23
        height: 100vh;
24
        top: 0;
25
        left: 0;
26
        background: #3E1E68;
27
        overflow: hidden;
28
      }
29

30
      .background span {
31
        width: 20vmin;
32
        height: 20vmin;
33
        border-radius: 20vmin;
34
        backface-visibility: hidden;
35
        position: absolute;
36
        animation: move;
37
        animation-duration: 45;
38
        animation-timing-function: linear;
39
        animation-iteration-count: infinite;
40
      }
41

42

43
      .background span:nth-child(0) {
44
        color: #FFACAC;
45
        top: 90%;
46
        left: 47%;
47
        animation-duration: 8s;
48
        animation-delay: -17s;
49
        transform-origin: 2vw 17vh;
50
        box-shadow: -40vmin 0 5.494502440636581vmin currentColor;
51
      }
52

53
      .background span:nth-child(1) {
54
        color: #FFACAC;
55
        top: 31%;
56
        left: 5%;
57
        animation-duration: 40s;
58
        animation-delay: -14s;
59
        transform-origin: -5vw -14vh;
60
        box-shadow: -40vmin 0 5.192195104974926vmin currentColor;
61
      }
62

63
      .background span:nth-child(2) {
64
        color: #FFACAC;
65
        top: 18%;
66
        left: 62%;
67
        animation-duration: 20s;
68
        animation-delay: -5s;
69
        transform-origin: -18vw -12vh;
70
        box-shadow: 40vmin 0 5.72205756381233vmin currentColor;
71
      }
72

73
      .background span:nth-child(3) {
74
        color: #FFACAC;
75
        top: 71%;
76
        left: 45%;
77
        animation-duration: 30s;
78
        animation-delay: -2s;
79
        transform-origin: -4vw -20vh;
80
        box-shadow: -40vmin 0 5.303503038071778vmin currentColor;
81
      }
82

83
      .background span:nth-child(4) {
84
        color: #E45A84;
85
        top: 90%;
86
        left: 38%;
87
        animation-duration: 15s;
88
        animation-delay: -48s;
89
        transform-origin: 7vw -9vh;
90
        box-shadow: -40vmin 0 5.882238754040052vmin currentColor;
91
      }
92

93
      .background span:nth-child(5) {
94
        color: #583C87;
95
        top: 34%;
96
        left: 32%;
97
        animation-duration: 30s;
98
        animation-delay: -36s;
99
        transform-origin: -6vw -15vh;
100
        box-shadow: 40vmin 0 5.183333217256063vmin currentColor;
101
      }
102

103
      .background span:nth-child(6) {
104
        color: #583C87;
105
        top: 25%;
106
        left: 41%;
107
        animation-duration: 21s;
108
        animation-delay: -47s;
109
        transform-origin: -10vw -5vh;
110
        box-shadow: 40vmin 0 5.345257098222438vmin currentColor;
111
      }
112

113
      .background span:nth-child(7) {
114
        color: #E45A84;
115
        top: 16%;
116
        left: 39%;
117
        animation-duration: 30s;
118
        animation-delay: -33s;
119
        transform-origin: -15vw 3vh;
120
        box-shadow: -40vmin 0 5.693872337330205vmin currentColor;
121
      }
122

123
      .background span:nth-child(8) {
124
        color: #583C87;
125
        top: 42%;
126
        left: 55%;
127
        animation-duration: 46s;
128
        animation-delay: -50s;
129
        transform-origin: -6vw 25vh;
130
        box-shadow: 40vmin 0 5.588315610213253vmin currentColor;
131
      }
132

133
      .background span:nth-child(9) {
134
        color: #E45A84;
135
        top: 78%;
136
        left: 25%;
137
        animation-duration: 44s;
138
        animation-delay: -21s;
139
        transform-origin: -4vw -12vh;
140
        box-shadow: -40vmin 0 5.82170170819547vmin currentColor;
141
      }
142

143
      .background span:nth-child(10) {
144
        color: #E45A84;
145
        top: 73%;
146
        left: 77%;
147
        animation-duration: 41s;
148
        animation-delay: -40s;
149
        transform-origin: 21vw -11vh;
150
        box-shadow: -40vmin 0 5.838449416658446vmin currentColor;
151
      }
152

153
      .background span:nth-child(11) {
154
        color: #E45A84;
155
        top: 48%;
156
        left: 81%;
157
        animation-duration: 33s;
158
        animation-delay: -42s;
159
        transform-origin: 6vw 19vh;
160
        box-shadow: 40vmin 0 5.848850560573668vmin currentColor;
161
      }
162

163
      .background span:nth-child(12) {
164
        color: #E45A84;
165
        top: 77%;
166
        left: 7%;
167
        animation-duration: 25s;
168
        animation-delay: -1s;
169
        transform-origin: 15vw 24vh;
170
        box-shadow: -40vmin 0 5.800039290361969vmin currentColor;
171
      }
172

173
      .background span:nth-child(13) {
174
        color: #E45A84;
175
        top: 77%;
176
        left: 38%;
177
        animation-duration: 51s;
178
        animation-delay: -40s;
179
        transform-origin: -1vw -13vh;
180
        box-shadow: -40vmin 0 5.876822672246133vmin currentColor;
181
      }
182

183
      .background span:nth-child(14) {
184
        color: #583C87;
185
        top: 58%;
186
        left: 98%;
187
        animation-duration: 7s;
188
        animation-delay: -1s;
189
        transform-origin: -19vw -20vh;
190
        box-shadow: -40vmin 0 5.622075629639948vmin currentColor;
191
      }
192

193
      .background span:nth-child(15) {
194
        color: #583C87;
195
        top: 79%;
196
        left: 31%;
197
        animation-duration: 39s;
198
        animation-delay: -46s;
199
        transform-origin: 14vw 21vh;
200
        box-shadow: 40vmin 0 5.022352355698978vmin currentColor;
201
      }
202

203
      .background span:nth-child(16) {
204
        color: #E45A84;
205
        top: 41%;
206
        left: 74%;
207
        animation-duration: 37s;
208
        animation-delay: -4s;
209
        transform-origin: -19vw 3vh;
210
        box-shadow: 40vmin 0 5.049960684696969vmin currentColor;
211
      }
212

213
      .background span:nth-child(17) {
214
        color: #583C87;
215
        top: 56%;
216
        left: 34%;
217
        animation-duration: 26s;
218
        animation-delay: -35s;
219
        transform-origin: -16vw -7vh;
220
        box-shadow: -40vmin 0 5.11253385954465vmin currentColor;
221
      }
222

223
      .background span:nth-child(18) {
224
        color: #583C87;
225
        top: 84%;
226
        left: 2%;
227
        animation-duration: 14s;
228
        animation-delay: -39s;
229
        transform-origin: -10vw -6vh;
230
        box-shadow: 40vmin 0 5.903761483531039vmin currentColor;
231
      }
232

233
      .background span:nth-child(19) {
234
        color: #E45A84;
235
        top: 61%;
236
        left: 39%;
237
        animation-duration: 21s;
238
        animation-delay: -36s;
239
        transform-origin: 14vw 9vh;
240
        box-shadow: 40vmin 0 5.448311817969409vmin currentColor;
241
      }
242

243
      .background span:nth-child(20) {
244
        color: #E45A84;
245
        top: 33%;
246
        left: 5%;
247
        animation-duration: 8s;
248
        animation-delay: -7s;
249
        transform-origin: 4vw 2vh;
250
        box-shadow: 40vmin 0 5.013421190075091vmin currentColor;
251
      }
252

253
      /* 动态背景 */
254

255
      body {
256
        height: 100vh;
257
        background-color: aquamarine;
258
      }
259

260
      .Box {
261
        position: fixed;
262
        top: 50%;
263
        left: 50%;
264
        transform: translate(-50%, -50%);
265
        width: 320px;
266
        background-color: rgba(0, 0, 0, 0.24);
267
        border-radius: 6px;
268
        padding: 20px 32px;
269
      }
270

271
      h3 {
272
        font-size: 22px;
273
        color: #fff;
274
        text-align: center;
275
        margin-bottom: 40px;
276
        font-weight: 500;
277
        letter-spacing: 5px;
278
      }
279

280
      input {
281
        width: 100%;
282
        height: 35px;
283
        border: 1px solid #fff;
284
        background-color: transparent;
285
        padding-left: 10px;
286
        font-size: 12px;
287
        color: #fff;
288
        margin-bottom: 20px;
289
        outline: none;
290
        border-radius: 5px;
291
      }
292

293
      input::placeholder {
294
        color: #fff;
295
      }
296

297
      .yzmBox {
298
        display: flex;
299
        justify-content: flex-start;
300
      }
301

302
      .yzmBox input {
303
        width: 70%;
304
        border-top-right-radius: 0;
305
        border-bottom-right-radius: 0;
306
      }
307

308
      .yzmBox .btn {
309
        cursor: pointer;
310
        width: 29%;
311
        background-color: #aa55ff;
312
        color: #d8d8d8;
313
        height: 35px;
314
        outline: none;
315
        border: 1px solid #aa55ff;
316
        font-size: 12px;
317
        border-radius: 6px;
318
        margin-left: 1%;
319
        border-top-left-radius: 0;
320
        border-bottom-left-radius: 0;
321
      }
322

323
      .forgetPwd {
324
        text-align: end;
325
        font-size: 12px;
326
        color: #ffffff;
327
        padding-right: 5px;
328
      }
329

330
      .loginBtn {
331
        width: 100%;
332
        line-height: 36px;
333
        text-align: center;
334
        font-size: 15px;
335
        color: #fff;
336
        border-radius: 6px;
337
        background: linear-gradient(to right, #aa55ff, #E45A84);
338
        outline: none;
339
        border: none;
340
        margin-top: 30px;
341
      }
342

343
      .no {
344
        margin-top: 30px;
345
        text-align: center;
346
        font-size: 12px;
347
        color: #ffffff;
348
      }
349
    </style>
350
  </head>
351
  <body>
352
    <!-- 背景 -->
353
    <div class="background">
354
      <span></span>
355
      <span></span>
356
      <span></span>
357
      <span></span>
358
      <span></span>
359
      <span></span>
360
      <span></span>
361
      <span></span>
362
      <span></span>
363
      <span></span>
364
      <span></span>
365
      <span></span>
366
      <span></span>
367
      <span></span>
368
      <span></span>
369
      <span></span>
370
      <span></span>
371
      <span></span>
372
      <span></span>
373
      <span></span>
374
      <span></span>
375
    </div>
376

377
    <div class="Box">
378
      <h3>某某管理系统</h3>
379
      <form action="">
380
        <input type="text" placeholder="请输入账号" required>
381
        <input type="password" placeholder="请输入密码" required>
382
        <div class="yzmBox">
383
          <input type="text" placeholder="请输入验证码">
384
          <button class="btn">发送</button>
385
        </div>
386
        <p class="forgetPwd">忘记密码</p>
387
        <input type="submit" class="loginBtn" value="登录"></button>
388
        <p class="no">没有账号？立即注册</p>
389
      </form>
390
    </div>
391
  </body>
392
</html>

蓝色登录界面（图二）：#

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>登录2</title>
6
    <style>
7
      * {
8
        margin: 0;
9
        padding: 0;
10
        box-sizing: border-box;
11
      }
12

13
      body {
14
        height: 100vh;
15
        background: linear-gradient(to right, #6af4ff, #ffffff);
16
      }
17

18
      .Box {
19
        position: fixed;
20
        top: 50%;
21
        left: 50%;
22
        transform: translate(-50%, -50%);
23
        width: 550px;
24
        height: 330px;
25
        display: flex;
26
      }
27

28

29
      form {
30
        position: absolute;
31
        top: 50%;
32
        left: 50%;
33
        transform: translate(-50%, -60%);
34
        width: 80%;
35
        text-align: center;
36
      }
37

38
      h3 {
39
        font-size: 24px;
40
        margin-bottom: 20px;
41
        letter-spacing: 5px;
42
      }
43

44
      input {
45
        width: 100%;
46
        height: 38px;
47
        border: 1px solid #000000;
48
        background-color: transparent;
49
        padding-left: 10px;
50
        font-size: 12px;
51
        color: #000000;
52
        margin-bottom: 15px;
53
        outline: none;
54
      }
55

56
      .desc {
57
        margin: 0px 20px 30px;
58
        text-align: center;
59
        font-size: 12px;
60
        color: #828282;
61
      }
62

63
      .loginBtn {
64
        width: 100%;
65
        line-height: 36px;
66
        text-align: center;
67
        font-size: 15px;
68
        color: #fff;
69
        background: rgb(57, 99, 134);
70
        outline: none;
71
        border: none;
72
        margin-top: 10px;
73
      }
74

75
      .no {
76
        display: flex;
77
        justify-content: space-between;
78
        cursor: pointer;
79
        text-align: center;
80
        font-size: 12px;
81
        color: #828282;
82
      }
83
    </style>
84
  </head>
85
  <body>
86
    <div class="Box">
87
      <form action="">
88
        <h3>欢迎登录</h3>
89
        <p class="desc">WELCOME LOGIN</p>
90
        <input type="text" placeholder="请输入账号" required>
91
        <input type="password" placeholder="请输入密码" required>
92
        <input type="submit" class="loginBtn" value="登录"></button>
93
        <p class="no">
94
          <span>忘记密码</span>
95
          <span>没有账号？立即注册</span>
96
        </p>
97
      </form>
98
    </div>
99
  </body>
100
</html>

青色登录界面（图三）：#

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>登录3</title>
6
    <style>
7
      * {
8
        margin: 0;
9
        padding: 0;
10
        box-sizing: border-box;
11
      }
12

13
      body {
14
        height: 100vh;
15
        background-color: aquamarine;
16
        background: url("https://images.pexels.com/photos/936722/pexels-photo-936722.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") no-repeat;
17
        background-size: cover;
18
      }
19

20
      .Box {
21
        position: fixed;
22
        top: 50%;
23
        left: 50%;
24
        transform: translate(-50%, -50%);
25
        width: 550px;
26
        height: 330px;
27
        display: flex;
28
      }
29

30
      .left {
31
        position: relative;
32
        width: 50%;
33
        height: 100%;
34
        background-color: rgba(57, 99, 134, 0.75);
35
      }
36

37
      .right {
38
        position: relative;
39
        width: 50%;
40
        height: 100%;
41
        background-color: rgba(255, 255, 255, 1);
42
      }
43

44
      .centerBox {
45
        position: absolute;
46
        top: 50%;
47
        left: 50%;
48
        transform: translate(-50%, -50%);
49
        width: 80%;
50
        text-align: center;
51
      }
52

53
      .left img {
54
        width: 50px;
55
        height: 50px;
56
        margin-bottom: 5px;
57
      }
58

59
      .left p {
60
        font-size: 14px;
61
        color: #fff;
62
      }
63

64
      .left h4 {
65
        font-size: 18px;
66
        color: #fff;
67
        margin-bottom: 10px;
68
      }
69

70
      .right form {
71
        position: absolute;
72
        top: 50%;
73
        left: 50%;
74
        transform: translate(-50%, -50%);
75
        width: 80%;
76
        text-align: center;
77
      }
78

79
      h3 {
80
        margin-bottom: 20px;
81
      }
82

83
      input {
84
        width: 100%;
85
        height: 30px;
86
        border: 1px solid #767676;
87
        background-color: transparent;
88
        padding-left: 10px;
89
        font-size: 12px;
90
        color: #000000;
91
        margin-bottom: 15px;
92
        outline: none;
93
      }
94

95
      .loginBtn {
96
        width: 100%;
97
        height: 35px;
98
        line-height: 32px;
99
        text-align: center;
100
        font-size: 15px;
101
        color: #fff;
102
        border-radius: 6px;
103
        background: rgb(57, 99, 134);
104
        outline: none;
105
        border: none;
106
        margin-top: 10px;
107
      }
108

109
      .no {
110
        cursor: pointer;
111
        margin-top: 30px;
112
        text-align: center;
113
        font-size: 12px;
114
        color: #828282;
115
      }
116
    </style>
117
  </head>
118
  <body>
119
    <div class="Box">
120
      <div class="left">
121
        <div class="centerBox">
122
          <img src="https://img0.baidu.com/it/u=2804005887,994501744&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
123
            alt="">
124
          <h4>某某后台管理系统</h4>
125
          <p>This is a description</p>
126
        </div>
127
      </div>
128
      <div class="right">
129
        <form action="">
130
          <h3>欢迎登录</h3>
131
          <input type="text" placeholder="请输入账号" required>
132
          <input type="password" placeholder="请输入密码" required>
133
          <input type="submit" class="loginBtn" value="登录"></button>
134
          <p class="no">没有账号？立即注册</p>
135
        </form>
136

137
      </div>
138
    </div>
139
  </body>
140
</html>

先看效果 :eye:#

页面源码:eagle:#

紫色登录界面（图一）：#

蓝色登录界面（图二）：#

青色登录界面（图三）：#

支持与分享

评论区