登录界面转换实现html,html5和css3登录注册表单界面切换动画

这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画。

HTML

html结构包含两个表单：登录表单和注册表单。开始时使用css将注册表单隐藏。

Log in

Your email or username

Your password

Keep me logged in

Not a member yet ?

Join us

Sign up

Your username

Your email

Your password

Please confirm your password

Already a member ?

Go and log in

这里的输入框使用了一些html5的新东西。密码框的type=password使用户输入的字符自动替换为小圆点。type=email能够自动检测用户输入的email地址是否为合法。require=required可以对表单进行非空判断，当用户没有填写内容时会阻止提交表单。autocomplete=on将根据用户以前填写的内容来中的补全表单。

现在有两个表单，你会发现在第一个表单的最上部有两个超链接。这是一个实用的小技巧，它可以保证我们在点击链接进行表单切换时不会切换到另一个页面上去。

这个demo中的第二个小技巧是字体图标的使用方法。这里将使用data-attribute来显示字体图标。通过设置data-icon=”icon_character”，我们只需要一个css属性选择器就可以给所有的图标设置样式。关于此内容请参考：24 Ways: Displaying Icons with Fonts and Data- Attributes。

注意：某些浏览器不支持background-clip: text属性，IE8级以下的IE浏览器不支持 :target伪类，IE9不支持css transitions和animations。

css代码请参考下载文件。