摘要：如何在HTML5中，使用CSS3的目标伪类:target来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。
【CSDN编译】导读：有开发者表示，HTML5将给个人开发者带来更多机遇。
下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。
这些效果，完全由HTML5和CSS3实现。
文章后面附上了三种不同风格的显示转换效果、以及源码下载。
既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。
这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。
此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。
我们将在文章末尾附上本实例的源码下载地址。
点击右下方Join us按钮，登录表单隐藏，注册表单显现请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。
HTML部分在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。
来看看代码：1<div id="container_demo" >2<!-- hidden anchor to stop jump /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" > Y our email or username </label>11<input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@"/>12</p>13<p>14<label for="password" class="youpasswd" data-icon="p"> Y our 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">25Not a member yet ?26<a href="#toregister" class="to_register">Join us</a>27</p>28</form>29</div>3031<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">Y our 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" > Y our email</label>40<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@"/>41</p>42<p>43<label for="passwordsignup" class="youpasswd"data-icon="p">Y our 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">54Already a member ?55<a href="#tologin" class="to_register"> Go and log in </a>56</p>57</form>58</div>5960</div>61</div>可以看到在上面的代码中，使用了一些HTML5不错的新功能。
比如在input type方面，实现密码自动隐藏用户键入点替换(当然这取决于浏览器是否支持)。
用浏览器检查输入类型的电子邮件是否是正确格式等。
有两个环节要记住。
你可能已经注意到表单项部的两个<a href>链接。
当我们点击并触发目标伪类时，我们就能通过“锚”标记（HTML中一种跳转定位方式，一般用于长网页）在原网页中跳到合适的位置，而不用另打开一个新网页。
第二个动作与所用图标、字体相关。
我们为显示的图标使用一个数据属性。
在HTML中通过设置“icon_character”，就可以选择一个CSS来控制所有的图标风格样式。
（这里对于锚标记的使用可能会有些糊涂，但看到后面就会明白了。
）CSS部分这里将会出现一些CSS3的技巧代码，请注意，可能有的浏览器目前还不支持CSS3而无法正常显示。
两个CSS定义。
（后面会说明为什么要定义两个CSS的原因。
）首先，为需要显示的区域定义一个外观。