HTML和CSS实现的透明登录框效果

实现代码

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>Loginh2>
11         <form>
12             <div class="inputbox">
13                 <input type="text" name="" required="">
14                 <label>Usernamelabel>
15             div>
16             <div class="inputbox">
17                 <input type="password" name=" " required="">
18                 <label>Passwordlabel>
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有一个动态过渡上浮的效果:

想知道具体是什么效果,可以自己动手尝试一下~

如果对其中的属性有不了解的地方,可以参考下面的注解版代码哦。

 

 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     /**/
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 }

 

转载于:https://www.cnblogs.com/nyw1983/p/11406387.html

你可能感兴趣的:(HTML和CSS实现的透明登录框效果)