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

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

Dabcc157b09c806f53a61102f47554e6?s=47 kaiye
April 18, 2012

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

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

Dabcc157b09c806f53a61102f47554e6?s=128

kaiye

April 18, 2012
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

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

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

  3. CSS3 Properties

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

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

  6. CSS3 Animation • http://www.paipai.com/caizuanjie.shtml • http://www.paipai.com/fangjia.shtml • chrome://flags/ enable Composited

    render layer borders (合成渲染层边框)
  7. CSS3动画角标 <css-selector>{ animation:<animation-name> <animation-duration> <animation-timing-function>; } @keyframes <animation-name>{ 0% {<css-declaration>}

    100% {<css-declaration>} }
  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
  9. JS动画角标 http://yekai.net/demo/animation-corner-3.html

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

  11. Flash动画角标 • Flash的参数设置 <embed src="corner.swf" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" wmode="transparent" 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" ></embed> 若变量值含有&符号,需转义为%26
  12. Flash动画角标 • getURL()

  13. 动画角标方案比较 方案 实现成本 复用成本 兼容性 CSS 低 低 IE6/7 CSS3

    中 中 Safari/Chrome/ Firefox/IE10 JS 高 低 !noscript Flash 高 低 Flash Player/!iOS
  14. None
  15. while(兼容性 && 实现成本){ do(); }

  16. while(兼容性 && 实现成本){ do(); } var 兼容性 = this.兼容性 ;

  17. IE && !IE • HTML5/CSS3 • http://sofish.de/1819 • http://pb.paipaioa.com •

    IE • CSS Attributes • Introduction to Dynamic HTML • ActiveX
  18. Reference • http://findmebyip.com/litmus/ • http://www.qianduan.net/47-amazing-css3- animation.html • http://www.5uflash.com/flashjiaocheng/ Flashyuweb/3173.html

  19. 谢谢