首页 > 消息公司资讯 / 行业新闻 / 建站知识 / )
运营活动CSS3实践
文章来源:腾讯ecd  浏览量:1260  发布时间:2012-11-01 05:20:04  
分享到:

如今消费者的胃口越来越挑剔,各大电商平台都绞尽脑汁想要玩出点新花样来吸引更多的用户,更多的下单量,更多的成交量,这就难为了设计师每次促销活动都要设计出更炫更有创意的页面来满足大家犀利的审美观。

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

CSS3能做什么呢?

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

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

  1. MSDN Battlefield CSS3动画 看他的头部
    https://developer.mozilla.org/zh-TW/demos/detail/battlefield-css3/launch

    头部的动画效果非常帅气,效果几乎可以和flash媲美,设计师在设计一些loading画面或者大banner条的时候,可以参考这个效果;
  2. Playdulla.com 一个相当赞的CSS3动画站
    http://playdulla.com/

    这个页面利用了视差效果,鉴于目前视差很流行,我们接下来的活动可能会引入,因此可以作为参考;
  3. CSS3 helix 一个3D效果的产品展示
    http://demo.marcofolio.net/css3_helix/

    我们很喜欢的一个效果,我们设想是在活动的商品列表上应用这个效果,当然不能照搬,我们可以简化效果,比如让商品图片稍微旋转一下;
  4. CSS3动画实现的太阳系
    http://neography.com/experiment/circles/solarsystem/

    同样很棒的效果,在做多商品图片展示的时候可以利用这个效果,比如鼠标放在商品上图片可以转动并显示商品相关信息;
  5. 超酷的旋转数字筒
    http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

    这个效果太帅了,可惜应用层面不高,或许我们可以把所有商品的图片全部拼成一个多面体?

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

http://daneden.me/animate/

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

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

JS,Flash等以往实现的优势:

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

缺点:

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

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

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

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

  1. 针对IE我们降级处理,这也是CSS3的特点,即使不兼容CSS3的浏览器也不会出现令人烦恼的bug,还是可以正常浏览;
  2. 效果限定几种,不使用过多的动画效果;
  3. 特殊情况还是可以用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存在很多缺陷:

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

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

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

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

上一篇: 网页中的手绘应用
下一篇: 字体达人入门篇

Technologies we use
首页|案例展示|新闻观点|服务范围|关于我们|联系我们|人才招聘|提交需求