Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS3/JS/Flash版动画角标的实现与比较
Search
kaiye
April 18, 2012
Technology
0
130
CSS3/JS/Flash版动画角标的实现与比较
以动画角标的实现为例,探讨各种技术方案的优缺点。blog:
http://www.cnblogs.com/kaiye/archive/2012/04/06/3039043.html
kaiye
April 18, 2012
Tweet
Share
More Decks by kaiye
See All by kaiye
大话前端黑客
kaiye
4
300
前端七年之路
kaiye
8
390
拍拍首页2012版前端技术应用
kaiye
2
270
后IE6时代
kaiye
1
1.4k
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
170
Notification 3
kaiye
0
85
前端开发眼中的组件库
kaiye
3
340
Notification 2
kaiye
0
69
Other Decks in Technology
See All in Technology
MLOpsの「あるある」課題の解決と、そのためのライブラリgokart
mski_iksm
1
150
サーバレス基盤で Gemini の性能を引きだすアーキテクトを構築した話
antonnion
0
100
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
270
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
【shownet.conf_】3Dアプローチで守るセキュリティ
shownet
PRO
0
240
virtme-ng
ennael
PRO
0
260
ITエンジニアとして知っておいてほしい、電子メールという大きな穴
logica0419
1
260
【ログ分析勉強会】EDR ログで内部不正を検出できるのか、Copilot に聞いてみた
hssh2_bin
2
250
生成AIアプリのアップデートと配布の課題をCDK Pipelinesで解決してみた
sonoda_mj
0
180
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
130
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
350
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
2
110
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Six Lessons from altMBA
skipperchong
26
3.4k
What's new in Ruby 2.0
geeforr
340
31k
GraphQLとの向き合い方2022年版
quramy
43
13k
Unsuck your backbone
ammeep
667
57k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
4 Signs Your Business is Dying
shpigford
180
21k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Agile that works and the tools we love
rasmusluckow
327
21k
Testing 201, or: Great Expectations
jmmastey
38
7k
Transcript
CSS3/JS/Flash版 动画角标的实现与比较 @kaiye
• 2008 - 2010 前端开发@支付宝 • 2010 - 至今 网页重构@ISUX
CSS3 Properties
CSS3 Animation http://css-tricks.com/examples/CSS3Clock/
CSS3 Animation http://designlovr.com/examples/ dynamic_stack_of_index_cards/
CSS3 Animation • http://www.paipai.com/caizuanjie.shtml • http://www.paipai.com/fangjia.shtml • chrome://flags/ enable Composited
render layer borders (合成渲染层边框)
CSS3动画角标 <css-selector>{ animation:<animation-name> <animation-duration> <animation-timing-function>; } @keyframes <animation-name>{ 0% {<css-declaration>}
100% {<css-declaration>} }
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
JS动画角标 http://yekai.net/demo/animation-corner-3.html
Flash动画角标 • Flash的参数设置 • getURL() http://yekai.net/demo/animation-corner-4.html
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
Flash动画角标 • getURL()
动画角标方案比较 方案 实现成本 复用成本 兼容性 CSS 低 低 IE6/7 CSS3
中 中 Safari/Chrome/ Firefox/IE10 JS 高 低 !noscript Flash 高 低 Flash Player/!iOS
None
while(兼容性 && 实现成本){ do(); }
while(兼容性 && 实现成本){ do(); } var 兼容性 = this.兼容性 ;
IE && !IE • HTML5/CSS3 • http://sofish.de/1819 • http://pb.paipaioa.com •
IE • CSS Attributes • Introduction to Dynamic HTML • ActiveX
Reference • http://findmebyip.com/litmus/ • http://www.qianduan.net/47-amazing-css3- animation.html • http://www.5uflash.com/flashjiaocheng/ Flashyuweb/3173.html
谢谢