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
150
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
320
前端七年之路
kaiye
8
410
拍拍首页2012版前端技术应用
kaiye
2
290
后IE6时代
kaiye
1
1.4k
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
190
Notification 3
kaiye
0
97
前端开发眼中的组件库
kaiye
3
420
Notification 2
kaiye
0
83
Other Decks in Technology
See All in Technology
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
Obsidian応用活用術
onikun94
1
450
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
310
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
280
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
280
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
0
470
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
330
エラーとアクセシビリティ
schktjm
1
1.2k
AWSで始める実践Dagster入門
kitagawaz
1
570
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
Featured
See All Featured
Docker and Python
trallard
45
3.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Raft: Consensus for Rubyists
vanstee
140
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Agile that works and the tools we love
rasmusluckow
330
21k
Making Projects Easy
brettharned
117
6.4k
GitHub's CSS Performance
jonrohan
1032
460k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Bash Introduction
62gerente
615
210k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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
谢谢