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 }