HTML5+CSS3构建的,动画切换

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

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。