css3入门

闲谈CSS3动画

字号+ 作者:小想 来源: 2014-11-16 21:49 我要评论( )

随着CSS3越来越热,CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头,小小地应用了下(详见 http://www.taobao.com/ 下拉箭头处的hover效果)。与其说是渐进增强,不如说是满足了

 随着CSS3越来越热,CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头,小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果)。与其说是渐进增强,不如说是满足了技术人小小的虚荣心。

以下是自己的一点理解,希望能对大家有所帮助。

淘宝案例解析

需求:鼠标移动到菜单上时旋转箭头,且给支持CSS3的浏览器加上旋转动画。

源码请查看demo源文件。

demo (http://fiddle.jshell.net/pjRVT/show/light/)

关于CSS3动画

从(http://www.w3.org/Style/CSS/current-work)可以看出,CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性,如rotate, scale, skew。
Transition 和 Animation 用于定义动画的过程。其中Transition 可以实现简单的动画;Animation则可以通过设定多个关键帧实现相对复杂的动画。

Can I Use? 兼容性

(数据来自http://caniuse.com/)

  IE Firefox Safari Chrome Opera
CSS 2D Transform no 3.5 3.2 2.0 10.5
CSS 3D Transform no no 4.* (Mac) no no
CSS Transition no 3.7 3.2 2.0 10.5
CSS Animation no no 4.0 2.0 no

 

可以看到,CSS Animation目前只有Webkit内核浏览器支持,目前只能自己玩玩;而Transition用来做渐进增强则较为合适。

一个简单的例子

需求:让一个div元素在鼠标移上去时变大1倍,旋转180度,且背景由红变蓝。

html code::

<div></div>

css code::

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;

    /* 定义动画的过程 */
    -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
    -moz-transition:    -moz-transform .5s ease-in, background .5s ease-in;
    -o-transition:      -o-transform .5s ease-in, background .5s ease-in;
    transition:         transform .5s ease-in, background .5s ease-in;
}

div:hover {
    /*  定义动画的状态 */
    -webkit-transform: rotate(180deg) scale(2);
    -moz-transform: rotate(180deg) scale(2);
    -o-transform: rotate(180deg) scale(2);
    -transform: rotate(180deg) scale(2);
    background: blue;
}

demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)

无奈的浏览器前缀

这是个令人非常痛苦的问题,因为不得不针对每个浏览器copy一遍重复代码。

值得注意的是无前缀的标准代码需放在最后。假如几年后某个属性成为标准,被浏览器默认支持了,这行代码会覆盖前面的定义,使得浏览器可以优先使用他。

稍微复杂点的例子(css3 animation)

需求:让一个div元素在点击后变大1倍,旋转180度,且背景由红变蓝;然后向右移动400px。

源码请查看demo源文件。

demo (http://fiddle.jshell.net/a4r94/show/light/) (Safari, Chrome only)

惊艳!CSS 3D Transformations

见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only,类似于http://www.cooliris.com/的效果),没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。

PS: Mac Safari的3D Transform、2D Transform和Opacity等视觉效果都是跑在GPU上的,为此我还特地验证下了Win Safari,果然不支持。

相关资料

webkit blog介绍animation/2d transforms/3d transforms的三篇文章
http://webkit.org/blog/138/css-animation/
http://webkit.org/blog/130/css-transforms/
http://webkit.org/blog/386/3d-transforms/

W3组织的CSS规范集
http://www.w3.org/Style/CSS/current-work

苹果官方关于CSS视觉效果的文档
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html

css animation的兼容性数据来源
http://caniuse.com/

3d transform的运用app
http://www.satine.org/research/webkit/snowleopard/snowstack.html
http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
http://www.fofronline.com/experiments/cube-3d/

css3动画的应用
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html
http://www.optimum7.com/css3-man/animation.html
http://hedgerwow.appspot.com/demo/flippage
http://neography.com/journal/our-solar-system-in-css3/
http://css-tricks.com/examples/StarryNightCSS3/
http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html

css3 animation的入门应用:钟的实现
http://g-zone.org/test/g-clock/index.html

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CssGaga – AutoSprite

    CssGaga – AutoSprite

    2014-11-16 21:49

  • 基于CSS3的下一代Web应用开发,第3部分: 在IE中的特殊处理

    基于CSS3的下一代Web应用开发,第3部分: 在IE中的特殊处理

    2014-11-16 21:49

  • 基于CSS3的下一代Web应用开发,第2部分:实现和应用

    基于CSS3的下一代Web应用开发,第2部分:实现和应用

    2014-11-16 21:49

  • 基于CSS3的下一代Web应用开发,第1部分:发展历史及新特性

    基于CSS3的下一代Web应用开发,第1部分:发展历史及新特性

    2014-11-16 21:49

网友点评
<