HTML5+CSS3構建的動畫切換

 　　有開發者表示，HTML5將給個人開發者帶來更多機遇。下面的稿件詳細描述了一個唯美的動畫效果，它實現了在同一個頁面中進行登錄表單和注冊表單的轉換。這些效果，完全由HTML5和CSS3實現。文章後面附上了三種不同風格的顯示轉換效果、以及源碼下載。既可為網頁瘦身，又可實現漂亮的網頁效果，快快收藏吧。

　　這篇稿件將描述如何在HTML5中，使用CSS3的目標偽類“:target”來創建注冊和登錄兩個表單、並實現它們在同一個頁面中的顯示轉換。此演示目的是向用戶展示從登錄表單點擊標注有“Join us”的按鈕鏈接到注冊表單的動畫效果。我們將在文章末尾附上本實例的源碼下載地址。

　　點擊右下方Join us按鈕，登錄表單隱藏，注冊表單顯現

　　請注意，此實例只用於演示目的，它只能在支持“:target”偽類的浏覽器中正常顯示出來。

　　HTML部分

　　在HTML中定義有兩個表單，其中一個表單已用CSS隱藏使之不可見。來看看代碼：

<div id="container_demo" > 

    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  --> 

    <a class="hiddenanchor" id="toregister"></a> 

    <a class="hiddenanchor" id="tologin"></a> 

    <div id="wrapper"> 

        <div id="login" class="animate form"> 

            <form  action="mysuperscript.php" autocomplete="on"> 

                <h1>Log in</h1> 

                <p> 

                    <label for="username" class="uname" data-icon="u" > Your email or username </label> 

                    <input id="username" name="

username" required="required" type="text" placeholder="myusername or [email protected]"/> 

                </p> 

                <p> 

                    <label for="password" class="youpasswd" data-icon="p"> Your password </label> 

                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 

                </p> 

                <p class="keeplogin"> 

                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 

                    <label for="loginkeeping">Keep me logged in</label> 

                </p> 

                <p class="login button"> 

                    <input type="submit" value="Login" /> 

                </p> 

                <p class="change_link"> 

                    Not a member yet ? 

                    <a href="#toregister" class="to_register">Join us</a> 

                </p> 

            </form> 

        </div> 

  

        <div id="register" class="animate form"> 

            <form  action="mysuperscript.php" autocomplete="on"> 

                <h1> Sign up </h1> 

                <p> 

                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label> 

                    <input id="usernamesignup" name="

usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> 

                </p> 

                <p> 

                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> 

                    <input id="emailsignup" name="

emailsignup" required="required" type=