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

Html代码

1. <divid="container_demo">
2. <!--hiddenanchortostopjumphttp://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4-->
3. <aclass="hiddenanchor"id="toregister"></a>
4. <aclass="hiddenanchor"id="tologin"></a>
5. <divid="wrapper">
6. <divid="login"class="animateform">
7. <formaction="mysuperscript.php"autocomplete="on">
8. <h1>Login</h1>
9. <p>
10. <labelfor="username"class="uname"data-icon="u">Youremailorusername</label>
11. <inputid="username"name="username"required="required"type="text"placeholder="myusernameormymail@mail.com"/>
12. </p>
13. <p>
14. <labelfor="password"class="youpasswd"data-icon="p">Yourpassword</label>
15. <inputid="password"name="password"required="required"type="password"placeholder="eg.X8df!90EO"/>
16. </p>
17. <pclass="keeplogin">
18. <inputtype="checkbox"name="loginkeeping"id="loginkeeping"value="loginkeeping"/>
19. <labelfor="loginkeeping">Keepmeloggedin</label>
20. </p>
21. <pclass="loginbutton">
22. <inputtype="submit"value="Login"/>
23. </p>
24. <pclass="change_link">
25. Notamemberyet?
26. <ahref="#toregister"class="to_register">Joinus</a>
27. </p>
28. </form>
29. </div>
31. <divid="register"class="animateform">
32. <formaction="mysuperscript.php"autocomplete="on">
33. <h1>Signup</h1>
34. <p>
35. <labelfor="usernamesignup"class="uname"data-icon="u">Yourusername</label>
36. <inputid="usernamesignup"name="usernamesignup"required="required"type="text"placeholder="mysuperusername690"/>
37. </p>
38. <p>
39. <labelfor="emailsignup"class="youmail"data-icon="e">Youremail</label>
40. <inputid="emailsignup"name="emailsignup"required="required"type="email"placeholder="mysupermail@mail.com"/>
41. </p>
42. <p>
43. <labelfor="passwordsignup"class="youpasswd"data-icon="p">Yourpassword</label>
44. <inputid="passwordsignup"name="passwordsignup"required="required"type="password"placeholder="eg.X8df!90EO"/>
45. </p>
46. <p>
47. <labelfor="passwordsignup_confirm"class="youpasswd"data-icon="p">Pleaseconfirmyourpassword</label>
48. <inputid="passwordsignup_confirm"name="passwordsignup_confirm"required="required"type="password"placeholder="eg.X8df!90EO"/>
49. </p>
50. <pclass="signinbutton">
51. <inputtype="submit"value="Signup"/>
52. </p>
53. <pclass="change_link">
54. Alreadyamember?
55. <ahref="#tologin"class="to_register">Goandlogin</a>
56. </p>
57. </form>
58. </div>
60. </div>
61. </div>

• LoginRegistrationForm.zip (139 KB)