完美的 登录注册框 含漂亮的过渡、转换效果

 

 

Html代码  

1. <div id="container_demo" >  
2.     <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->  
3.     <a class="hiddenanchor" id="toregister"></a>  
4.     <a class="hiddenanchor" id="tologin"></a>  
5.     <div id="wrapper">  
6.         <div id="login" class="animate form">  
7.             <form  action="mysuperscript.php" autocomplete="on">   
8.                 <h1>Log in</h1>   
9.                 <p>   
10.                     <label for="username" class="uname" data-icon="u" > Your email or username </label>  
11.                     <input id="username" name="username" required="required" type="text" placeholder="myusername or [e-mail]"/>  
12.                 </p>  
13.                 <p>   
14.                     <label for="password" class="youpasswd" data-icon="p"> Your password </label>  
15.                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />   
16.                 </p>  
17.                 <p class="keeplogin">   
18.                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />   
19.                     <label for="loginkeeping">Keep me logged in</label>  
20.                 </p>  
21.                 <p class="login button">   
22.                     <input type="submit" value="Login" />   
23.                 </p>  
24.                 <p class="change_link">  
25.                     Not a member yet ?  
26.                     <a href="#toregister" class="to_register">Join us</a>  
27.                 </p>  
28.             </form>  
29.         </div>  
30.    
31.         <div id="register" class="animate form">  
32.             <form  action="mysuperscript.php" autocomplete="on">   
33.                 <h1> Sign up </h1>   
34.                 <p>   
35.                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label>  
36.                     <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />  
37.                 </p>  
38.                 <p>   
39.                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>  
40.                     <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="[e-mail]"/>   
41.                 </p>  
42.                 <p>   
43.                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>  
44.                     <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>  
45.                 </p>  
46.                 <p>   
47.                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>  
48.                     <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>  
49.                 </p>  
50.                 <p class="signin button">   
51.                     <input type="submit" value="Sign up"/>   
52.                 </p>  
53.                 <p class="change_link">    
54.                     Already a member ?  
55.                     <a href="#tologin" class="to_register"> Go and log in </a>  
56.                 </p>  
57.             </form>  
58.         </div>  
59.            
60.     </div>  
61. </div>    

 

 

 

• LoginRegistrationForm.zip (139 KB)