Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

CSS Transition ÈëÃÅ

¾¡¹ÜÈËÃÇÆÚ´ýÆÁÄ»ÏÔʾ¼¼ÊõÓÐËù¸Ä½ø£¬µ«CSSºÍHTMLÈ´Ö»ÌṩÁËÉÙÊýµÄ½»»¥Éè¼Æ¿ØÖÆ£¬¶øÇÒ»¹Ö»ÊÇË«Ïò״̬µÄ¶ø·Ç½¥½ø×´Ì¬£¬È磺һ¸öÁ´½ÓÖ»ÄÜÊÇÒ»ÖÖÑÕÉ«»òÁíÒ»ÖÖÑÕÉ«£¬Îı¾ÓòÖ»ÄÜÊÇÒ»Öֳߴç»òÁíÒ»Öֳߴ磬һ·ùÕÕÆ¬ÒªÃ´Í¸Ã÷Ҫô²»Í¸Ã÷¡£Ã»ÓдÓÁ½ÖÖ״̬µÄÖ®¼äµÄ²¿·Ö£¬¼´Ã»Óйý¶É¡£
ÕâÖÖ²»ÓÅÑŵÄÇл»Ð§¹ûʹºÜ¶àÒ³ÃæÈÃÈ˸оõͻأ¡£ËäÈ»ÎÒÃÇ¿ÉÒÔÓÃDHTMLºÍjQueryÀ´ÊµÏÖ¹ý¶ÉЧ¹û£¬µ«ÕâÐèÒªºÜ¶à´úÂëÀ´ÊµÏÖÔ­±¾ºÜ¼òµ¥µÄÊÂÇé¡£
ÔÚÕâÆªÎÄÕÂÖУ¬ÎÒÃÇÓÃÒ»ÖÖ¼ò½àµÄ·½·¨À´¸øÒ³ÃæÔö¼Ó¹ý¶ÉЧ¹û£¬Ä㽫»á·¢ÏÖCSS ransitionsµÄһЩÓÐÓõÄÐÅÏ¢ÒÔ¼°ÈçºÎʹÓÃËüÃÇ¡£
¼¸¸öÔÂǰ£¬ÎÒÔøÃ°Ê§µØ½¨ÒéÉè¼ÆÊ¦ÃÇÓ¦¸ÃʹÓÃCSS3м¼ÊõÀ´ÊµÏÖËûÃÇÆÚ´ýºÜ¾ÃµÄһЩ»ù±¾Ñùʽ£¬µ«ÎÊÌâÊÇÕâЩ¼¼ÊõÔÚIEÖУ¨°üÀ¨IE8£©¶¼ÎÞ·¨ÊµÏÖ¡£Ò»Ð©¶ÁÕßÈÏΪ½¨ÒéʹÓÃÄÇËÄ·ÖÖ®ÈýµÄÈËÎÞ·¨¿´µ½µÄм¼ÊõÊÇÇáÂʵġ£
¶ÔÓÚÕâЩ¶ÁÕߣ¬ÎÒ»á˵£ºÏȲ»Òª¼±ÓÚ¾ö¶¨£¬ÒòΪÎÒ½«»áÏòÄãÃǽéÉÜCSSÖÐÁíÒ»¸öÊôÐÔ£¬Ëü¿ÉÒÔÓýö½ö¼¸ÐдúÂëΪÈκÎÔªËØÌí¼Ó¹ý¶ÉЧ¹û¡£
CSS3ÕýÔÚÒýÈëCSS transition¼¼Êõ£¬µ«ÒѾ­×÷Ϊһ¸öÀ©Õ¹£¬CSS transitionÒѱ»Ìí¼Ó½øÁËWebkit¡£ÕâÒâζ×ÅÕâÏî¼¼ÊõĿǰֻÄÜÔÚ»ùÓÚWebkitÒýÇæµÄä¯ÀÀÆ÷ÉÏʹÓã¬ÈçApple SafariºÍGoogle Chrome¡£
CSS¹ý¶ÉЧ¹ûµÄÓÉÀ´
¹ý¶É×÷ΪWebkitµÄÒ»²¿·ÖÒѾ­ÓÐÒ»¶Îʱ¼äÁË£¬»ùÓÚ´Ë£¬Safari UIʵÏÖÁËÆäËûä¯ÀÀÆ÷ÎÞ·¨ÊµÏֵĺܶà¿áìŵÄЧ¹û¡£µ«W3C CSS Workgroup¾Ü¾ø½«Æä¼ÓÈë¹Ù·½±ê×¼£¬Ò»Ð©³ÉÔ±ÈÏΪ¹ý¶ÉЧ¹û²¢·ÇÑùʽÊôÐÔ£¬¶øÇÒÒѾ­¿ÉÒÔÓýű¾ÊµÏÖ¡£
µ«ºÜ¶àÉè¼ÆÕߺͿª·¢Õߣ¬°üÀ¨ÎÒÔÚÄÚ£¬ÈÏΪ¹ý¶ÉЧ¹ûʵ¼ÊÉÏÊÇÒ»ÖÖ¶¯Ì¬ÑùʽÊôÐÔ£¬¶ø·Ç´«Í³ÉÏÎÒÃǺܶàÈËʹÓõľ²Ì¬Ñùʽ¡£
ÐÒÔ˵ÄÊÇ£¬ÕùÂÛÒѾ­¹ýÈ¥£¬È¥ÄêÈýÔ·ÝÀ´×ÔAppleºÍMozillaµÄ´ú±íÃÇ¿ªÊ¼½«CSS Transition Module ¼ÓÈëCSS Level 3 specification£¬ºÍApple¼ÓÈëWebkitµÄÄDz¿·Ö·Ç³£½Ó½ü¡£
½¥½øÔöÇ¿Éè¼ÆµÄ¼ò½é
ÔÚ½øÐÐÏÂÃæµÄÄÚÈÝ֮ǰ£¬ÈÃÎÒÃÇÏÈÇ¿µ÷Ò»µã£ºÈç¹ûÑùʽÔÚä¯ÀÀÆ÷Éϲ»¾ßÓл¥²Ù×÷ÐÔ£¬ÓÀÔ¶²»Òª°ÑÍøÕ¾¹¦ÄÜÒÀÀµÓÚÑùʽ¡£
Õâ¾ÍÊÇ˵£¬Äã¿ÉÒÔÓÃÑùʽÈç¹ý¶ÉЧ¹ûºÍÔöÇ¿Éè¼ÆÀ´¸Ä½øÓû§ÌåÑ飬¶ø²»ÎþÉüÄÇЩÎÞ·¨¿´µ½ËüÃǵÄÓû§µÄ¿ÉÓÃÐÔ¡£Ö»ÒªÄÜÈÃÓû§À뿪ÁËÄÇЩ¹ý¶ÉЧ¹ûÈÔÈ»¿ÉÒÔÍê³ÉËûÃǵÄÈÎÎñ¾ÍºÃ¡£
Ê×ÏȽéÉÜһЩ¹ý¶ÉµÄ¸ÅÄî
CSS¹ý¶É²»»áÌæ´úDHTML£¬µ«¿ÉÒÔÔÚÖ§³Ö¹ý¶ÉЧ¹ûµÄä¯ÀÀÆ÷ÖÐÔöÇ¿ÄãµÄÉè¼Æ£¬²¢ÇÒ²»Óõ£ÐÄÆÆ»µÆäËûÓû§µÄä¯ÀÀÌåÑé¡£
ÄãÐèÒªÔÚApple Safari 3+ »òÕß Google ChromeÖп´µ½¹ý¶ÉЧ¹û£¬ÕâÁ½¸öä¯ÀÀÆ÷¶¼¿ÉÒÔÔÚMacºÍPCÉÏʹÓá£
·´×ª
¹ý¶ÉЧ¹û×îÃ÷ÏԵı


Ïà¹ØÎĵµ£º

Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨


Zen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
À´Ô´£ºhttp://www.javaeye.com/news/13149
Òë×Ô£ºSmashing Magazine
ÖÐÎÄ£ºZen Coding: Ò»ÖÖ¿ìËÙ±àдHTML/CSS´úÂëµÄ·½·¨
ÔÚ±¾ÎÄÖÐÎÒÃǽ«Õ¹Ê¾Ò»ÖÖеÄʹÓ÷ÂCSSÑ¡ÔñÆ÷µÄÓï·¨À´¿ìËÙ¿ª·¢HTMLºÍCSSµÄ·½·¨¡£ËüÓÉSergey Chikuyonok¿ª·¢¡£
ÄãÔÚдHTML´úÂë(°üÀ¨ËùÓбêÇ©¡¢ÊôÐÔ¡¢ ......

ÍøÒ³Öг£¼ûCSS HackµÄʹÓÃÕûÀí

_property:value
ÊôÐÔǰ¼Ó_Ïß,¸Ãhack¶ÔIEÓÐЧ£¬ÔÚFFÏÂÎÞЧ
Õâ¶Î´úÂëÔÚIEÏ¿´,divµÄ±ß¿òΪÀ¶É«,¶øÔÚFireFoxÏÂÎÞЧ
<style type="text/css">
.tx_border{_border:1px solid #333333;}/*Õâ¸öÔÚIEÏ¿ÉÒÔ¿´µ½±ß¿òΪ»ÒÉ«£¬¶øÔÚFFÏÂÊÇûÓÐÈκεÄЧ¹û*/
</style>
Ñ¡Ôñ·û {width:IE5.x¿í¶È; voice-family :"\"}\"" ......

ÓÃJavaScriptÐÞ¸ÄÍøÒ³cssÑùʽ

ÓÃJavaScriptÐÞ¸ÄÍøÒ³Ñùʽ
Ò»¡¢¾Ö²¿¸Ä±äÑùʽ
·ÖΪ¸Ä±äÖ±½ÓÑùʽ£¬¸Ä±äclassNameºÍ¸Ä±äcssTextÈýÖÖ¡£ÐèҪעÒâµÄÊÇ£º
×¢Òâ´óСд
£º
javascript¶Ô´óСдʮ·ÖÃô¸Ð£¬className²»Äܹ»°Ñ“N”д³É“n”£¬cssTextÒ²²»Äܹ»°Ñ“T”д³É“t”£¬·ñÔòÎÞ·¨ÊµÏÖЧ¹û¡£
µ÷Ó÷½·¨
£º
Èç¹û¸Ä ......

CSS½â¾öδ֪¸ß¶È´¹Ö±¾ÓÖÐ

Ô­ÎÄÁ´½Ó ×÷Õߣºâø·É
¾¡¹ÜÓÐ CSS µÄ vertical-align ÌØÐÔ£¬µ«ÊDz¢²»ÄÜÓÐЧ½â¾öδ֪¸ß¶ÈµÄ´¹Ö±¾ÓÖÐÎÊÌ⣨ÔÚÒ»¸ö DIV ±êÇ©ÀïÓÐδ֪¸ß¶ÈµÄÎı¾»òͼƬµÄÇé¿öÏ£©¡£
±ê ×¼ä¯ÀÀÆ÷Èç Mozilla, Opera, Safari µÈ.£¬¿É½«¸¸¼¶ÔªËØÏÔʾ·½Ê½É趨Ϊ TABLE(display: table;) £¬ÄÚ²¿×ÓÔªËØ¶¨Îª table-cell (display: table-cell)£¬Í¨¹ý ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ