1、雪中悍刀行 http:/ CSS3让 HTML表单更加吸引眼球越来越多的 WEB设计师开始关注 CSS3过度效果的使用， 过度效果不仅可以美化网站界面，自定义动画，而且还可以代替 Javascript，增加搜索引擎的友好度。下面为大家演示如何能够建立在 HTML5中输入字段的动画效果。 尤其是 CSS3的:valid伪类，它是比以往任何时候都更容易自定义文本输入。启动文件首先我们需要准备一个空白的 index.html文件。CSS3 Animated Form Inputs提交按钮不会有什么效果，但会重新加载页面。建议不要链接到后端的 PHP或 Ruby脚本对数据进行处理，或者甚至通过 Aja
2、x连接。其中，里面每个输入类.row 保持一个 div元素分开。 这样一来就容易得多，旁边的标签显示输入字段， 同样包括字段的右侧的其他通知或警告。 每个输入类.txt 而textarea的元素被称呼使用.txtarea 。* Asterisk fields are requiredYour Name *E-mail Address *Subject *Message *CSS 布局结构接下来解释 CSS重置， 用类似的块模板重置浏览器的默认字体大小，行高，也盒大小类似。 另外，设置的各种 web字体和结构的基本要素与适当的间距。 随时保存其他 Web项目中使用这个模板。html, body,
3、 div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong,sub, sup, tt, var, b, u, i,center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,caption, tbody, tfoo
4、t, thead, tr, th, td, article, aside, canvas, details,embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin:0;padding:0;border:0;font-size:100%;font: inherit;vertical-align:baseline;outline:none;-webkit-font-smoothing: antialias
5、ed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;html height:101%; body font-family:Oxygen,Arial,Helvetica,sans-serif;font-size:62.5%;line-height:1;padding-bottom:85px;background:#f5f7f7url(images/bg.png);/*
6、Image Source: http:/ */:selection background:#d2bef5; :-moz-selection background:#d2bef5; :-webkit-selection background:#d2bef5; br display:block;line-height:2.2em; table border-collapse:collapse;border-spacing:0; img border:0;max-width:100%; 接下来是代码的核心主体部分，将 div使用 ID #w 。 其中660px 具有有限的宽度，这是在页面上居中。 块
7、容器内部的行元素风格，内部标签和表单输入字段。/* form styles */form .row display:block;padding:7px8px;margin-bottom:7px;form .row:hover background:#f1f7fa;form label display: inline-block;font-size:1.2em;font-weight:bold;width:120px;padding:6px0;color:#464646;vertical-align:top;form .req color:#ca5354; form .note font-siz
8、e:1.2em;line-height:1.33em;font-weight:normal;padding:2px7px;margin-bottom:10px;form input:focus, form textarea:focus outline:none; /* placeholder styles: http:/ */:-webkit-input-placeholder color:#aaafbd;font-style:italic; /* WebKit */:-moz-placeholder color:#aaafbd;font-style:italic; /* Mozilla Fi
9、refox 4 to 18 */:-moz-placeholder color:#aaafbd;font-style:italic; /* Mozilla Firefox 19+ */:-ms-input-placeholder color:#aaafbd;font-style:italic; /* Internet Explorer 10+ */class .req 是整个标签使用所需的星号字符， CSS3的浏览器完全支持这些属性。与过渡样式最后我们可以使用伪类执行动画， 开始.txt .txtarea 类每个表单元素上使用。form .txt display: inline-block;p
10、adding:8px9px;padding-right:30px;width:240px;font-family:Oxygen,sans-serif;font-size:1.35em;font-weight:normal;color:#898989;background-color:#f0f0f0;background-image:url(images/checkmark.png);background-position:110%center;background-repeat:no-repeat;border:1pxsolid#ccc;text-shadow:01px0rgba(255,25
11、5,255,0.75);-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:01px2pxrgba(25,25,25,0.25)inset,-1px1px#fff;-moz-box-shadow:01px2pxrgba(25,25,25,0.25)inset,-1px1px#fff;box-shadow:01
12、px2pxrgba(25,25,25,0.25)inset,-1px1px#fff;-webkit-transition:all0.3s linear;-moz-transition:all0.3s linear;transition:all0.3s linear;form .txtarea display: inline-block;padding:8px11px;padding-right:30px;width:320px;height:120px;font-family:Oxygen,sans-serif;font-size:1.35em;font-weight:normal;color
13、:#898989;background-color:#f0f0f0;background-image:url(images/checkmark.png);background-position:110%4%;background-repeat:no-repeat;border:1pxsolid#ccc;text-shadow:01px0rgba(255,255,255,0.75);-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-border-radius:3
14、px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:01px4px-1px#a8a8a8inset;-moz-box-shadow:01px4px-1px#a8a8a8inset;box-shadow:01px4px-1px#a8a8a8inset;-webkit-transition:all0.3s linear;-moz-transition:all0.3s linear;transition:all0.3s linear;另外，建立 CSS3动画需要很多的工作，比如外部库 Animate.css 。 还好 CSS3足以提供基本的动画 - 悬停，重点，和类似伪类。最后希望这个教程能为 Web开发人员提供一个示例代码库，多次练习使用，希望你也可以将自己的网站上实施类似的过渡。(本文出自汪子臻用户研究与体验设计中心 http:/
