有开发者表示，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=