實現代碼
HTML部分
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>透明登錄框</title>
6 <link rel="stylesheet" href="denglu.css">
7 </head>
8 <body>
9 <div class="box">
10 <h2>Login</h2>
11 <form>
12 <div class="inputbox">
13 <input type="text" name="" required="">
14 <label>Username</label>
15 </div>
16 <div class="inputbox">
17 <input type="password" name=" " required="">
18 <label>Password</label>
19 </div>
20 <input type="submit" name="" value="submit">
21 </form>
22 </div>
23 </body>
24 </html>
CSS樣式表部分
1 body{
2 margin:0px;
3 padding:0px;
4 font-family:sans-serif;
5 background: url(bs3.jpg);
6 background-size:cover;
7 }
8 .box{
9 position:absolute;
10 top:50%;
11 left:50%;
12 transform:translate(-50%,-50%);
13 /*實現塊元素百分比下居中*/
14 width:450px;
15 padding:50px;
16 background: rgba(0,0,0,.8);
17 box-sizing:border-box;
18 box-shadow: 0px 15px 25px rgba(0,0,0,.5);
19 border-radius:15px;
20 }
21 .box h2{
22 margin:0 0 30px;
23 padding:0;
24 color: #fff;
25 text-align:center;
26 }
27 .box .inputbox{
28 position:relative;
29 }
30 .box .inputbox input{
31 width: 100%;
32 padding:10px 0;
33 font-size:16px;
34 color:#fff;
35 letter-spacing: 1px;
36 margin-bottom: 30px;
37 border:none;
38 border-bottom: 1px solid #fff;
39 outline:none;
40 background: transparent;
41 }
42 .box .inputbox label{
43 position:absolute;
44 top:0px;
45 left:0px;
46 padding:10px 0;
47 font-size: 16px;
48 color:#fff;
49 pointer-events:none;
50 transition:.5s;
51 }
52 .box .inputbox input:focus ~ label, 53 .box .inputbox input:valid ~ label 54 {
55 top:-18px;
56 left:0;
57 color:#03a9f4;
58 font-size:14px;
59 }
60 .box input[type="submit"] 61 {
62 background: transparent;
63 border:none;
64 outline:none;
65 font-size: 16px;
66 color:#fff;
67 background: #03a9f4;
68 padding:15px 20px;
69 cursor: pointer;
70 border-radius:10px;
71 }
來看一下最終展現的效果，這是一個動態的效果：
初始狀態
輸入中的狀態，登錄框中的username和password有一個動態過渡上浮的效果：
想知道具體是什么效果，可以自己動手嘗試一下~
如果對其中的屬性有不了解的地方，可以參考下面的注解版代碼哦。
其中有涉及到相關選擇器的知識，如有不解請參照 ：
https://www.cnblogs.com/nyw1983/p/11628364.html
1 body{ 2 margin:0px; 3 padding:0px; 4 font-family:sans-serif; 5 /*設置字體為sans-serif*/ 6 background: url(bs3.jpg); 7 background-size:cover; 8 /*背景圖片尺寸為覆蓋cover*/ 9 } 10 .box{ 11 position:absolute; 12 /*定位方式絕對定位absolute*/ 13 top:50%; 14 left:50%; 15 /*頂和高同時設置50%實現的是同時水平垂直居中效果*/ 16 transform:translate(-50%,-50%); 17 /*實現塊元素百分比下居中*/ 18 width:450px; 19 padding:50px; 20 background: rgba(0,0,0,.8); 21 /*背景顏色為黑色，透明度為0.8*/ 22 box-sizing:border-box; 23 /*box-sizing設置盒子模型的解析模式為怪異盒模型， 24 將border和padding划歸到width范圍內*/ 25 box-shadow: 0px 15px 25px rgba(0,0,0,.5); 26 /*邊框陰影 水平陰影0 垂直陰影15px 模糊25px 顏色黑色透明度0.5*/ 27 border-radius:15px; 28 /*邊框圓角，四個角均為15px*/ 29 } 30 .box h2{ 31 margin:0 0 30px; 32 padding:0; 33 color: #fff; 34 text-align:center; 35 /*文字居中*/ 36 } 37 .box .inputbox{ 38 position:relative; 39 } 40 .box .inputbox input{ 41 width: 100%; 42 padding:10px 0; 43 font-size:16px; 44 color:#fff; 45 letter-spacing: 1px; 46 /*字符間的間距1px*/ 47 margin-bottom: 30px; 48 border:none; 49 border-bottom: 1px solid #fff; 50 outline:none; 51 /*outline用於繪制元素周圍的線 52 outline：none在這里用途是將輸入框的邊框的線條使其消失*/ 53 background: transparent; 54 /*背景顏色為透明*/ 55 } 56 .box .inputbox label{ 57 /*<label> 標簽為 input 元素定義標注（標記）*/ 58 position:absolute; 59 top:0px; 60 left:0px; 61 padding:10px 0; 62 font-size: 16px; 63 color:#fff; 64 pointer-events:none; 65 /*鼠標事件消失，比如說選中文字，光標定位，超鏈接下划線*/ 66 transition:.5s; 67 /*過渡時間5s*/ 68 } 69 .box .inputbox input:focus ~ label, 70 .box .inputbox input:valid ~ label 71 { 72 top:-18px; 73 left:0; 74 color:#03a9f4; 75 font-size:14px; 76 } 77 .box input[type="submit"] 78 { 79 background: transparent; 80 border:none; 81 outline:none; 82 font-size: 16px; 83 color:#fff; 84 background: #03a9f4; 85 padding:15px 20px; 86 cursor: pointer; 87 /*光標呈現為指示鏈接的指針（一只手）*/ 88 border-radius:10px; 89 }