һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 WEBҳܱ

[ҳ] H5Чijַ

[]
13233 websjy 2015-12-9 10:11:08
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
֪һԪأȾһײ棬ʵĶ̬ܸûõIJ飻һH5ӪҳſĶЧƷƴ졣

꣬СloadingЧ󵽸ʽH5Ӫҳſչ֣ЧһʿνǻϱЧѳΪһϸʦ֪򡣱ĽͨһЩʹһͬھֳH5Чַ


dzھ⶯ЧܣһżС⣺ͼ⼸ӣǷ˵⶯أҳ֮ϳֵأ
ԣ𰸱ʦǶdzϤgifСˣH5ЧĵһַGIFˡ

Чַ1GIF
GIFͼƬóϸڵСλͼ ͡СѹɱͣͼƬ̬ڸֲϵͳ޼Եĺ֮ǡGIFķʽкܶ࣬ϤphotoshopʱᣬFlashAEGIFʽȵȡ


GIFH5ЧﵱloadingСǩԪأҪѿͼƬС;֮ƽ⣬һСϸڵĶ
H5ҳGIFͼƬķʽҪܵʡɱΪġֻҪԱͼƬ/ͼƬʽҳϽüɡ
GIFһЩص㣬ôDZͬʱԱһֵܣ֡

Чַ2֡
֡һŵȼĶֽ֡ͼƬjsűģдʹcss3step()ɡstep()ƶ˵ļǺܺõģʹñȽСڡ֡GIFIJڣűԿ֡ĿͶͣGIF޷ںͨжʼ͸ȵ޸ġ
һ֡زȱľҪһŵȼġֽ֡ͼƬ.pngͨJavaScriptűCSS3 animationĹȺstep() ͼƬbackground-position߽ϾͿԿһ֡


ľ鿴GIF֡ΪֻʺһЩСϸڵĶʵҲԳһЩܶصĶЧӣİİһh5ҳ棬ֽ֡ͼ+JavaScriptűģ֡ ƴ϶ɵġ







Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| websjy 2015-12-9 10:18:59
| ʾȫ¥
2F

Чַ3CSS3
CSS3ӦǶԲᱻһԱǶΪóƽĶCSS3ȱӦIJԻûбкõ֧֡ӣ԰ϴ˹H5Ӫҳ˹-л



ſᵽûѵĶЧʵҪCSS3дɵġ
ҽһCSS3ĶԣTransform ΣTransition ɣAnimation
Transform Σӵ rotate ת skew Ť scale translate ƶ matrix Ч˹УǶԳֽ⼸仯ЧIJ
Transition ɣӵ޸ִб任ԣʱʺӳʱҶϤıߣҲǹtransition趨֮µġ

20151127200718351.jpg

***չߣƴ***

Animation TransformΪTransitionΪɣôAnimationļAnimation趨keyframesֵԪһʱɶ



ȻθʸЧѶƴʦأ
ССTipsʹDemo߷־ͷű+Էֽ+زͼװ
ͼΪһС޷ṩDemoʱǿʹáԷֽķʽԷֽùʦݱдֵжıдƾյĺ͹ʦнĸ׼һЩ


Էֽʾ

Чַ4SVG
SVGҲǶЧвɺԵһŷǶΪóĶ׶ǣIE8,Android4.2ֲ֧áͼӣ漰ԪߵĶһ㶼dzSVG֮ȻҲʵһЩӵĶͼƬʵֳɱDz̫ġ
֪ʶռSVGʸͼΣScalable Vector Graphics DZ XML ʽͼһЩرĵط
  • ɱֹ߶ȡ޸ģ±
  • ߴСѹԸǿ
  • ʸ
  • XML
һSVGͼʵһѵĶλêɵġԺܷĴΪĵʽҳеãҲǼ򵥵Ľı뼴ɡҪעĵǣһSVGһҪʹAI߻ʸͼʦͬѧŶ

20151127201048604.png


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| websjy 2015-12-9 10:22:31
| ʾȫ¥
3F

Чַ5Canvas
HTML5 Ԫ ƻ壬ӵжֻ·ΡԲΡַԼͼķûлͼġеĻƹ JavaScript ɡǶΪóڻ滭ĶͼһԪĶЧCanvasóġ


CanvasSVGֵܣ󲿷ֵͼCanvasSVGɵģߵĶƵҲЩ
  • canvasǻԼ̶ĸ߿svgDzֱʵʸŴС
  • canvas.jpgĸʽͼsvgıĸʽͼ
  • canvasƵͼռDOMsvgÿͼ1DOMԪ
  • canvasʺͼܼ͵ĶsvgʺϴʹãƮѩ
  • canvasȫűsvgֱʹʸתɡ

20151127201035489.gif


Чַ6Flash->Canvas
ȥ漸ֳַFlashתCanvasķҲǽر𱬵һʽȻᵽԻ͵FlashDz벻ſݴʣͨFlash cc־ϸĶCanvasļеĽCreate.jsĽŲɡ
զIEGСӣôһ̽˷ħڡ




Чַ7video
ƵdzرĶЧvideoෲH5ҳӣŴ˲Ϳ˰^^



Чַ8JavaScript
ʵֻҪ漰ĶСҳӦȶҪjsдŲıдҲ˵еĶЧ벻Javascriptͬѧ֧֡кܶرJavascriptű⣬three.jsϸϸãͿͬĶЧ


һ򵥵ıH5Чַϣ걾ĵСǶ´¶Чʱһʱھԭú8ַ˶ĶЧʦĺʵֳɱο嶯ЧҪſɵ֪ʹַʽʺϵġ





Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
kaorou37 2015-12-11 19:24:59
| ʾȫ¥
4F
Ҫ,¥ͷDz
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-1-22 09:49

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б