HTML吸引人眼球的网页,CSS3让HTML表单更加吸引眼球

越来越多的WEB设计师开始关注CSS3过度效果的使用， 过度效果不仅可以美化网站界面，自定义动画，而且还可以代替Javascript，增加搜索引擎的友好度。

下面为大家演示如何能够建立在HTML5中输入字段的动画效果。 尤其是CSS3的:valid伪类，它是比以往任何时候都更容易自定义文本输入。

启动文件

首先我们需要准备一个空白的index.html文件。

提交按钮不会有什么效果，但会重新加载页面。建议不要链接到后端的PHP或Ruby脚本对数据进行处理，或者甚至通过Ajax连接。

其中，里面每个输入类.row保持一个div元素分开。 这样一来就容易得多，旁边的标签显示输入字段， 同样包括字段的右侧的其他通知或警告。 每个输入类.txt而textarea的元素被称呼使用.txtarea 。

CSS布局结构

接下来解释CSS重置， 用类似的块模板重置浏览器的默认字体大小，行高，也盒大小类似。 另外，设置的各种web字体和结构的基本要素与适当的间距。 随时保存其他Web项目中使用这个模板。

接下来是代码的核心主体部分，将div使用ID #w 。 其中660px具有有限的宽度，这是在页面上居中。 块容器内部的行元素风格，内部标签和表单输入字段。

class .req 是整个标签使用所需的星号字符， CSS3的浏览器完全支持这些属性。

与过渡样式

最后我们可以使用伪类执行动画， 开始.txt .txtarea类每个表单元素上使用。

另外，建立CSS3动画需要很多的工作，比如外部库Animate.css 。 还好CSS3足以提供基本的动画 - 悬停，重点，和类似伪类。

最后希望这个教程能为Web开发人员提供一个示例代码库，多次练习使用，希望你也可以将自己的网站上实施类似的过渡。

(本文出自汪子臻用户研究与体验设计中心，转载时请注明出处)

申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！