登陆界面 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <link rel="stylesheet" href="./css/style.css">
 8     <title>Document</title>
 9 </head>
10 <body>
11     <div class="container">
12         <div class="contain">
13             <form action="">
14                 <h1>welcome!</h1>
15                 <div class="top"><label for="">Name:</label><input type="text" class="one" placeholder="请输入用户名"></div>
16                 <div class="mid"><label for="">Password:</label><input type="password" class="two" placeholder="请输入密码"></div>
17                 <div class="bottom"><label for="">E-mail:</label><input type="email" class="three" placeholder="请输入E-mail"></div>
18                 <div class="footer"><label for="">Tele—phone:</label><input type="tel" class="four" placeholder="请输入电话号码"></div>
19                 <div class="submit-footer"><input type="submit" class="submit"><input type="reset"class="reset"></div>
20             </form>
21             <div class="clearboth"></div>
22         </div>
23     </div>
24 </body>
25 </html>
 1 .contain{
 2     height: 360px;
 3     width: 50%;
 4     margin: 0 auto;
 5     position: relative;
 6     border: 1px solid black;
 7     background-image: url('../images/timg (1).jpg')
 8 }
 9 form{
10     /* border: 1px solid black; */
11     width: 300px;
12     position: relative;
13     top: 50px;
14     left: 450px;
15 }
16 .one{
17     animation: move 2s;
18     animation-delay:0.5s;
19 }
20 .two{
21     animation: moveOne 2s;
22 }
23 .three{
24     animation: moveTwo 2s;
25     animation-delay:1.5s;
26 }
27 .four{
28     /* opacity: 0; */
29     animation: moveThree 2s;
30     animation-delay: 2s
31 }
32 @keyframes move{
33     from {
34         opacity: 0;
35         top:0px;
36     }
37     to {
38         opacity: 1;
39         top:63px;
40     }
41 }
42 @keyframes moveOne{
43     from{
44         top:0px;
45     }
46     to{
47         opacity: 1;
48         top:93px;
49     }
50 }
51 @keyframes moveTwo{
52     from {
53         opacity: 0;
54         top:0px;
55     }
56     to {
57         opacity: 1;
58         top:123px;
59     }
60 }
61 @keyframes moveThree{
62     from {
63         opacity: 0;
64         top:0px;
65     }
66     to {
67         opacity: 1;
68         top:153px;
69     }
70 }
71 input{
72     text-align: center;
73     /* border: 1px solid black; */
74     /* border-radius: 10px; */
75 }
76 .one,.two,.three,.four{
77     position: absolute;
78     left: 120px;
79     overflow: hidden;
80 }
81 .top,.mid,.bottom,.footer,.submit-footer{
82     margin-top: 10px;
83 }
84 .reset{
85     width: 52%;
86     margin-left: 5px;
87     border:1px solid rgba(0,0,0, 0.5);
88     box-shadow: 0 0 5px #000 inset;
89 }
90 .submit{
91     width: 40%;
92     border:1px solid rgba(0,0,0, 0.5);
93     box-shadow: 0 0 5px #000 inset;
94 }

 

posted @ 2018-09-16 20:39  likaibei  阅读(272)  评论(0)    收藏  举报