如何利用CSS3提高网站视觉效果

　　利用按钮多态效果提升直观感觉

　　我们设计CMS模板的时候都会考虑按钮的三态。按钮的三态用来模拟用户的点击过程，一个好的按钮设计可以大幅增加用户的点击欲，特别是一些电商网站上，一个button制作的是否精良，是否吸引人点击，甚至可以直接影响到电商网站的最终成交量。而CSS3的到来，通过动画，渐变再加上按钮过渡效果，阴影等属性的使用，则可以更加细致的模拟整个用户点击的过程，使得用户在整个操作的交互过程都变得愉悦且舒服。比如下图我做的这个结合CSS3 3D所模拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果，其余是没有被按下的效果，如果用户在长按住按钮的时候，还会出现按键模拟被按下的过程动画。被按下后光线投影不变，而文字的凹凸感改变。

　　利用鼠标交互提升快感

　　鼠标点击（click）、滑过（hover）、激活（active）操作仍是当今webPC端上最重要的几个交互方式。新浪微博上大部分的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块大致包括：顶导，左侧栏导航，勋章列表，feed区，右侧栏皮肤选择按钮，皮肤选择弹层……

　　利用渐变字色提升视觉冲击

　　随着css3的广泛使用，文字色渐变效果也越来越受到CMS模板设计师和前端工程师的青睐。一个良好的渐变可以使文字看起来有质感，仿佛刻在纸面上一样，从而给用户一个良好的视觉感受。我们可以利用CSS3支持的文字透明，显示背景渐变的方式来模拟文字渐变。再加上一些过渡动画效果，我们甚至可以模拟一个简单的跑马灯的效果了。

　　利用动画效果吸引眼球

　　在摄影作品中，讲究布局不要太死，要给照片“留口气”。借鉴到CMS模板设计中，这个说法同样有它的存在意义。先看看我们的微博首页，各个模块之间挤在一起，看上去布局有点闷，这时候，右上角那个彩虹按钮就成了点睛之笔。利用css3简单加上一些五角星欢快的旋转飞出，然后淡出的效果。这样给人一种欢快活泼的感觉，仿佛点击里会有一些惊喜。