HTML5+CSS3构建同页面表单间的动画切换
- 格式:doc
- 大小:104.50 KB
- 文档页数:10
摘要:如何在HTML5中,使用CSS3的目标伪类:target来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。
【CSDN编译】导读:有开发者表示,HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果,完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身,又可实现漂亮的网页效果,快快收藏吧。
这篇稿件将描述如何在HTML5中,使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。
点击右下方Join us按钮,登录表单隐藏,注册表单显现
请注意,此实例只用于演示目的,它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分
在HTML中定义有两个表单,其中一个表单已用CSS隐藏使之不可见。来看看代码:1
可以看到在上面的代码中,使用了一些HTML5不错的新功能。比如在input type方面,实现密码自动隐藏用户键入点替换(当然这取决于浏览器是否支持)。用浏览器检查输入类型的电子邮件是否是正确格式等。
有两个环节要记住。你可能已经注意到表单项部的两个链接。当我们点击并触发目标伪类时,我们就能通过“锚”标记(HTML中一种跳转定位方式,一般用于长网页)在原网页中跳到合适的位置,而不用另打开一个新网页。第二个动作与所用图标、字体相关。我们为显示的图标使用一个数据属性。在HTML中通过设置“icon_character”,就可以选择一个CSS来控制所有的图标风格样式。(这里对于锚标记的使用可能会有些糊涂,但看到后面就会明白了。)
CSS部分
这里将会出现一些CSS3的技巧代码,请注意,可能有的浏览器目前还不支持CSS3而无法正常显示。
两个CSS定义。(后面会说明为什么要定义两个CSS的原因。)
首先,为需要显示的区域定义一个外观。
62#subscribe,
63#login{
64position: absolute;
65top: 0px;