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
260
后IE6时代
kaiye
1
1.4k
GDD 2011 in Guangzhou
kaiye
0
1.8k
拍首2011前端技术分享
kaiye
1
170
Notification 3
kaiye
0
85
前端开发眼中的组件库
kaiye
3
330
Notification 2
kaiye
0
67
Other Decks in Technology
See All in Technology
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
34k
How STYLIGHT went responsive
nonsquared
93
5k
What the flash - Photography Introduction
edds
65
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Documentation Writing (for coders)
carmenintech
63
4.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Designing for Performance
lara
604
67k
Producing Creativity
orderedlist
PRO
340
39k
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
谢谢