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ÉÏʹÓá£
·´×ª
¹ý¶ÉЧ¹û×îÃ÷ÏԵı
Ïà¹ØÎĵµ£º
CSS´úÂë
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
HTML´úÂë
<div class="test"&g ......
Ê×ÏȽéÉÜÒ»ÏÂeidtarea£º
EditAreaÊÇÒ»¸öjavascriptÔ´´úÂë±à¼Æ÷¡£Ö§³Ö£ºÎı¾¸ñʽ»¯£¬ËÑË÷ÓëÌæ»»£¬ÊµÊ±Óï·¨×ÅÉ«¼ÓÁÁ¡£µ±Ç°Ö§³ÖµÄÓïÑÔ°üÀ¨£ºPHP¡¢CSS¡¢
Javascript¡¢Python¡¢HTML¡¢XML¡¢VB¡¢C¡¢CPP¡¢SQL¡¢Pascal¡¢Basic¡¢Brainf*ck
ÏÂÔصØÖ·£ºhttp://sourceforge.net/projects/editarea/
¿ÉÒÔ×÷ΪºÜºÃµÄÔÚÏ༹߱¤¾ß ......
±ß¿ò·ç¸ñÊôÐÔ(border-style)
Õâ¸öÊôÐÔÓÃÀ´É趨ÉÏÏÂ×óÓұ߿òµÄ·ç¸ñ£¬ËüµÄÖµÈçÏ£º
none (ûÓб߿ò£¬ÎÞÂ۱߿ò¿í¶ÈÉèΪ¶à´ó)
dotted (µãÏßʽ±ß¿ò)
dashed (ÆÆÕÛÏßʽ±ß¿ò)
solid (Ö±Ïßʽ±ß¿ò)
double (Ë«Ïßʽ±ß¿ò)
groove (²ÛÏßʽ±ß¿ò)
ridge(¼¹Ïßʽ±ß¿ò)
inset (ÄÚǶЧ¹ûµÄ±ß¿ò)
outset (Í»ÆðЧ¹ûµÄ±ß¿ò)
± ......
CSS Hack ÊÇÔÚ±ê×¼ CSS û°ì·¨¼æÈݸ÷ä¯ÀÀÆ÷ÏÔʾЧ¹ûʱ²Å»áÓÃÉϵIJ¹¾È·½·¨,ÔÚ¸÷ä¯ÀÀÆ÷³§É̽âÎö CSS ûÓдï³ÉÒ»ÖÂÇ°,ÎÒÃÇÖ»ÄÜÓÃÕâÑùµÄ·½·¨À´Íê³ÉÕâÑùµÄÈÎÎñ¡£ÍøÉÏÄã¿ÉÄÜÄÜËÑË÷µ½Ò»´ó¶ÑµÄ CSS Hack£¬µ«ÊÇÎÒ½ñÌì·¢²¼µÄÄã¿ÉÄܲ¢²»¶¼ºÜÁ˽⣬ÒòΪÕâЩ¶¼ÊÇÖ»Õë¶Ôµ¥¶ÀÒ»¸öä¯ÀÀÆ÷µÄ CSS Hack¡£
ΪÁËÏòÄãչʾÕâЩ CSS Hack ÊÇ·ñÕý³£Ô ......