实现代码
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 }
