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

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

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

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

　　HTML部分

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

<divid="container_demo">

<!--hiddenanchortostopjumphttp://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4-->

<ahtml' target='_blank'>class="hiddenanchor"id="toregister"></a>

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

<divid="wrapper">

<divid="login"class="animateform">

<formaction="mysuperscript.php"autocomplete="on">

<h1>Login</h1>

<p>

<labelfor="username"class="uname"data-icon="u">Youremailorusername</label>

<inputid="username"name="

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

</p>

<p>

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。