提高用户体验的CSS3技术应用研究

陈梅

摘要：随着计算机软件和互联网的飞速发展，用户对视觉用户体验提出了更高的要求，而CSS3的产生不仅仅对已有功能进行了扩展和延伸，而且对Web设计理念和方法也进行了革新。CSS3使得Web应用有更好的用户体验。文章论述了CSS3技术在提高用户体验过程中的各种应用。

关键词：用户体验； CSS3；Web应用

中图分类号：G712 文献标识码：A 文章编号：1009-3044（2015）13-0033-02

Abstracts： With the rapid development of computer software and the Internet， users put forward higher requirements on the visual user experience. CSS3 has not only the expansion and extension of the function， but also has carried on the reform to the concept and design method of Web. CSS3 makes the Web application having a better user experience. This article discusses the process of the application on CSS3 technology in improving the user experience.

Key words： user experience； CSS3； web application

CSS （Cascading Style Sheet） ，称为层叠样式表，CSS3指的是CSS第三个版本。1997 年W3C 颁布关于样式的第一个标准 CSS1.0，1998年CSS2的发布，包含了CSS1所有的功能，并扩充和改进了很多，使CSS有了更强大的属性，该标准至今仍在广泛流行，而且主流浏览器都在使用。但随着计算机软件的更新、互联网的飞速发展，使用者在视觉用户体验方面有了更高的要求。面对更高的用户体验需求，CSS2显得有些力不从心。而CSS3的产生，不仅是对已有功能的扩展和延伸，而更多的是对Web设计理念和方法的革新。CSS3使得 Web 应用可以提供更强大的功能，并且有更好的用户体验，因此对CSS3新技术的应用，是更好掌握互联网技术的一个有效途径。

由于CSS3在提高用户体验方面有了很大改观，下面就用户体验方面的内容分别进行阐述。

1 CSS3利用鼠标交互和伪类提升用户体验

用户在浏览网页的时候，对鼠标的操作仍然是Web页面的最重要的一个方式，鼠标操作包括链接（link）、滑过（hover）、激活（active）操作等。在CSS2版本中，伪类选择器就已经存在，比如超级链接的四个状态选择器：a：link、a：visited、a：hover、a：active。比如可以通过CSS3制作按钮过渡效果、阴影等属性，能更加细致的模拟整个用户点击的过程，使得用户在整个操作的交互过程都变得愉悦且舒服。

由于CSS3增加了非常多的选择器，所以在CSS3选择器中，伪类选择器的种类非常多。其中包括： first-line伪元素选择器， first-letter伪元素选择器，root选择器，empty选择器等等。这些伪类选择器是CSS3新增的选择器，它们都能得到在Android和iOS平台下Web浏览器的支持。有的用户在浏览网页的时候，会使用鼠标选中一些文字内容，方便进行阅读，如果使用伪类selection，可以设置相应的属性来设置相应的背景颜色和文字颜色，这样能对文字的阅读更加方便，文字的显示效果更加明显，从而增强了用户的使用感受。

2 CSS3利用文字渐变提升用户体验

随着CSS3的广泛使用，文字的渐变效果也越来越受到用户和网页开发设计者的重视。一个良好的渐变可以使文字看起来更加有质感，给用户提供一个更加良好的视觉感受。我们可以利用CSS3对文字透明的支持，通过显示背景渐变的方式来模拟文字渐变。如果再加上一些过渡动画效果，甚至可以实现一个简单的跑马灯效果。因此通过渐变文字，也可以提高用户的体验。

3 利用过渡效果提升用户体验

CSS3可以使用过渡效果来增强用户体验，比如以下代码是实现当光标划过按钮时，该按钮会向右移动15像素。但是这个没有过渡效果，在视觉效果上感觉比较突兀。主要的相关代码如下：

button { margin-left：0； }

button：hover { margin-left：15px；}

如果将代码进行改写，添加ease-out关键字，开启慢移功能后，就添加了延迟过渡动画效果，这样在视觉效果方面看上去使人感觉更真实。相关代码如下：

button {

margin-left：0；

transition： margin-left .25s ease-out； }

button.moveRight {

margin-left：15px； }

4 利用动画提升用户体验

与场景过渡相比，CSS动画相对来说会稍微复杂些。 如果Web页面希望引起用户注意，可以在页面元素中添加动画效果，利用动画效果吸引用户的眼球。随着浏览器对CSS3支持的不断完善，之前使用JavaScript能实现的动画效果，现在使用CSS3代码就可以很容易的实现，这也显示了CSS3新特性的强大。CSS3动画的属性主要分为三类：transform、transition以及animation。比如在下列代码中是使用的animation属性，但是需要将 "myfirst" 动画捆绑到 div 元素，动画的时长为10秒。在这里应用动画的时候，必须注意一点，那就是要定义动画的名称和时长。因为默认值是0，所以如果要忽略时长的话，动画是不会允许的。相关代码如下：

div

{animation： myfirst 10s；

-moz-animation： myfirst 10s； /* Firefox */

-webkit-animation： myfirst 10s； /* Safari 和 Chrome */

-o-animation： myfirst 10s； /* Opera */}

综上所述，由于CSS3担任在Web页面进行布局和页面装饰的技术，它可以更加有效地对页面的布局、字体和颜色、背景或其他动画效果方面实现精确的控制。由于CSS3 是 CSS 的升级版本，CSS3新标准提供了更全面的规范，并且更加实用。比如有：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，随着越来越多的浏览器已经相继支持CSS3的规范，CSS3在Web页面中的应用也会越来越广泛。在 Web页面效果的开发中，使用 CSS3 技术将会更好的优化我们的应用程序，极大的提高程序的性能，同时也能更好地提高用户体验，使用户能在Web页面的应用中有更好的体会。

参考文献：

[1] 毛冲. 浅谈CSS3在网页开发中的特性[J].江西广播电视大学学报，2014（1）：152.

[2] 胡江汇. 下一代Web标准之CSS3核心技术研究[J]. 黑龙江科技信息，2012（12）.

[3] 何丽. 基于CSS3.0技术的网页元素效果[J].软件导刊，2011（8）.

[4] 大漠. 图解CSS3核心技术与案例实战[M].北京：机械工业出版社，2014（7）.