CSS3在青岛网站制作中的应用越来越广泛，曾经需要用flash或者js做的效果，有些现在通过css3就可以实现，只是由于国内的浏览器版本都比较低，例如ie6、ie7等还有一定比例的用户，这些低版本的浏览器都css3的一些效果兼容性比较差。但是这也阻挡不了css3的快速发展，相信css在青岛网站建设中的应用越来越多。

设计重构是一家，不光设计，从代码表现上我们也要协助一起创新。这几年HTML5,CSS3的发展非常迅猛，大家都在上面花了不少时间去学习去研究，而以往我们为了实现一些特殊效果，往往会借助flash，JS这些技术，而我们最后决定在活动中用CSS3来代替这2位的工作。

CSS3能做什么呢？

圆角，阴影，渐变，还有目前应用还比较少的动画，变形等等，这些元素结合起来可以实现一些非常惊人的效果。

我们来看看一些相当精彩的应用吧！

• MSDN Battlefield CSS3动画 看他的头部
  https://developer.mozilla.org/zh-TW/demos/detail/battlefield-css3/launch
  
  头部的动画效果非常帅气，效果几乎可以和flash媲美，设计师在设计一些loading画面或者大banner条的时候，可以参考这个效果；
• Playdulla.com 一个相当赞的CSS3动画站
  http://playdulla.com/
  
  这个页面利用了视差效果，鉴于目前视差很流行，我们接下来的活动可能会引入，因此可以作为参考；
• CSS3 helix 一个3D效果的产品展示
  http://demo.marcofolio.net/css3_helix/
  
  我们很喜欢的一个效果，我们设想是在活动的商品列表上应用这个效果，当然不能照搬，我们可以简化效果，比如让商品图片稍微旋转一下；
• CSS3动画实现的太阳系
  http://neography.com/experiment/circles/solarsystem/
  
  同样很棒的效果，在做多商品图片展示的时候可以利用这个效果，比如鼠标放在商品上图片可以转动并显示商品相关信息；
• 超酷的旋转数字筒
  http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
  
  这个效果太帅了，可惜应用层面不高，或许我们可以把所有商品的图片全部拼成一个多面体？

这里特别推荐一个网站Animate.css是一个CSS3动画效果合集，集合了目前所有CSS3的动画效果,你如果想了解CSS3有哪些动画效果可以作为参考：

http://daneden.me/animate/

这些都是很棒的应用，其实这些也只是动画层面的一些应用，有了CSS3，我们可以不用图片，只用代码就可以做出平时要去切N张图做出来的效果，而且设计师同学也可以知道“哦，原来我们可以这样做啊！”。

当然，要在实际项目中实践新技术是一件有风险的事情，所以我们要对此进行风险评估，只有保证万无一失以后才能使用。

JS，Flash等以往实现的优势：

• 浏览器兼容性非常好，主流的浏览器包括远古的IE6都可以完美支持;
• JS用市面上五彩缤纷的类库能够实现很多效果；
• Flash几乎能够实现你想要的任何效果；

缺点：

• 如果浏览器禁用JS，你的代码就变成纯字母了；
• 加载的库过多会让用户觉得急躁难耐；
• 各种bug让你烦不胜烦；
• 哦，你发现你的iPhone看不了Flash；
• Flash好一点的效果体积都很大，还得外载Flash Player；

考虑到这是个用户体验至上的时代，于是我们说，试试我们的CSS3吧，来看看CSS3的特点：

• 好帅，不需要任何其他插件或者啥支持；
• 我发现iPhone也可以正常浏览；
• 要对IE系列说再见了；
• 各种浏览器前缀；
• 有了他，我在也不用担心圆角阴影渐变各种形状边框变形了；

看起来还不错，于是针对CSS3的特点我们考虑了几个解决方案：

• 针对IE我们降级处理，这也是CSS3的特点，即使不兼容CSS3的浏览器也不会出现令人烦恼的bug，还是可以正常浏览；
• 效果限定几种，不使用过多的动画效果；
• 特殊情况还是可以用JS代替CSS3以保证万无一失；

准备充分我们就可以正式搞起了，于是我们在3月拍拍彩钻节活动中首次引入了CSS3，我们在首页的banner中使用了CSS3来实现动画效果，并且在类目分会场中的一些细节也引入了CSS3的其他功能来增加亮点。

活动地址：http://www.paipai.com/caizuanjie.shtml

首页用CSS3中的延迟属性来达到类似Flash时间轴一样的动画效果，在所有元素加载完以后，花朵会时快时慢的转动，云彩和周围的小岛会慢慢的浮动，给人一种非常舒服的感觉。

3月大促取得比较令人满意的反响，这种新颖的应用让人眼前一亮，于是我们决定在接下来的4月拍拍旅游季活动中继续加大使用力度，在首页整屏都使用了CSS3动画。

活动地址：http://www.paipai.com/fangjia.shtml

首页的每个类目logo都使用了CSS3效果来加强展示，每个logo在首页加载完后都和云彩一样漂浮着，效果非常赞。

当然，除了活动，在平时的类目频道的一些小细节也会使用一些基础的CSS3属性，大家都爱用我们当然更要用，例如女装频道和运动频道的logo区：

右下角下浮层：

等等，虽然低级浏览器不兼容，但是针对现代浏览器的用户还是能找到不少惊喜的！

当然，CSS3不是完美的，正如前面所说的，CSS3存在很多缺陷：

• 为了实现效果会使用大量独立图片，增加网页请求数，而且花费大量的时间来切图；
• 你必须给IE6PNG24做兼容；
• 大量的前缀让代码看起来十分冗长；
• 过多的CSS3动画效果，特别是持续的动画效果会让webkit浏览器明显变慢，配置不是很好的机器帧数可能会在20以下（亲测结果）；

在以后的活动中，我们在思考几种中和的解决方案：

• JS仍然在我们的考虑范围，JS+CSS3的组合被证明是非常好的一个方式，可以用少量的JS和CSS3结合做出更好的效果；
• 尽量使用一次性的动画效果，infinite无限循环莫滥用；
• 使用一些工具来自动生成内核前缀，来节约书写时间；

最后结论是我们仍然鼓励使用，适当的使用会给项目增加很多亮点，低级浏览器不兼容但是也不出错是他的最大优点，除了这点没有任何不适，并且对重构本身的技术能力提升也有非常大的帮助，在以后的运营活动中，我们仍然会继续支持使用CSS3来让活动更加有创意。

利用CSS3做的动画，在兼容性、速度、安全性方面，都要比flash、js制作好的多，例如在移动设备的兼容性等，既安全有速度稳定，CSS3应用也将越来普及。