Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3/JS/Flash版动画角标的实现与比较

kaiye
April 18, 2012

 CSS3/JS/Flash版动画角标的实现与比较

以动画角标的实现为例,探讨各种技术方案的优缺点。blog: http://www.cnblogs.com/kaiye/archive/2012/04/06/3039043.html

kaiye

April 18, 2012
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

  1. CSS3/JS/Flash版
    动画角标的实现与比较
    @kaiye

    View full-size slide

  2. • 2008 - 2010 前端开发@支付宝
    • 2010 - 至今 网页重构@ISUX

    View full-size slide

  3. CSS3 Properties

    View full-size slide

  4. CSS3 Animation
    http://css-tricks.com/examples/CSS3Clock/

    View full-size slide

  5. CSS3 Animation
    http://designlovr.com/examples/
    dynamic_stack_of_index_cards/

    View full-size slide

  6. CSS3 Animation
    • http://www.paipai.com/caizuanjie.shtml
    • http://www.paipai.com/fangjia.shtml
    • chrome://flags/
    enable Composited render layer borders (合成渲染层边框)

    View full-size slide

  7. CSS3动画角标
    {
    animation:
    ;
    }
    @keyframes {

    0% {}

    100% {}
    }

    View full-size slide

  8. CSS3动画角标
    .corner-ad-1:hover{animation: cornerad 0.3s step-start;}
    @keyframes cornerad{

    0% {background-position: right 0;}

    33%{background-position: right -36px;}

    67%{background-position: right -72px;}

    100% {background-position: right -108px;}
    }
    http://yekai.net/demo/animation-corner-2.html

    View full-size slide

  9. JS动画角标
    http://yekai.net/demo/animation-corner-3.html

    View full-size slide

  10. Flash动画角标
    • Flash的参数设置
    • getURL()
    http://yekai.net/demo/animation-corner-4.html

    View full-size slide

  11. Flash动画角标
    • Flash的参数设置
    allowscriptaccess="always" quality="high" width="120" height="120"
    FlashVars="url=http://t.qq.com/
    weiweixiao&pic=http://t0.qlogo.cn/mbloghead/
    ce1dbda08969ddd2a5ea/
    120&callback=closeCornerAd" >
    若变量值含有&符号,需转义为%26

    View full-size slide

  12. Flash动画角标
    • getURL()

    View full-size slide

  13. 动画角标方案比较
    方案 实现成本 复用成本 兼容性
    CSS 低 低 IE6/7
    CSS3 中 中 Safari/Chrome/
    Firefox/IE10
    JS 高 低 !noscript
    Flash 高 低 Flash Player/!iOS

    View full-size slide

  14. while(兼容性 && 实现成本){

    do();
    }

    View full-size slide

  15. while(兼容性 && 实现成本){

    do();
    }
    var 兼容性 = this.兼容性 ;

    View full-size slide

  16. IE && !IE
    • HTML5/CSS3
    • http://sofish.de/1819
    • http://pb.paipaioa.com
    • IE
    • CSS Attributes
    • Introduction to Dynamic HTML
    • ActiveX

    View full-size slide

  17. Reference
    • http://findmebyip.com/litmus/
    • http://www.qianduan.net/47-amazing-css3-
    animation.html
    • http://www.5uflash.com/flashjiaocheng/
    Flashyuweb/3173.html

    View full-size slide