HTML5CSS3构建同页面表单间动画切换.docxVIP

HTML5+CSS3构建同页面表单间的动画切换2012-03-30 16:13?|?4577次阅读?|?来源：CSDN编译?【已有4条评论】发表评论关键词：CSS3,HTML5?|?作者：赵红?|?收藏这篇资讯【CSDN编译】导读：有开发者表示，HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果，完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。点击右下方Join us按钮，登录表单隐藏，注册表单显现请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。来看看代码：div?id=container_demo???!--?hidden?anchor?to?stop?jump?/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??h1Log?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?mymail@/??/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=loginkeepingKeep?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_registerJoin?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=uYour?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=email?placeholder=mysupermail@/??/p??p??label?for=passwordsignup?class=youpasswd?data-icon=pYour?password?/labe