CSS3實現的滑鼠懸浮和移開div淡入淡出效果:本章節介紹一下如何利用css3實現滑鼠懸浮和離開div實現淡入淡出效果。代碼實例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi
CSS3實現的滑鼠懸浮和移開div淡入淡出效果:
本章節介紹一下如何利用css3實現滑鼠懸浮和離開div實現淡入淡出效果。
代碼實例如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div.demo{ float:left; border:1px solid #ccc; } div.demo i{ cursor:pointer; height:50px; transition:opacity 2s; width:50px; background:#000; float:left; margin:5px; opacity:0; } div.demo i:hover{ opacity:1; transition-duration:0s; } </style> </head> <body> <div class="demo"> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </body> </html>
上面的代碼實現了我們的效果，當滑鼠懸浮可以實現元素的淡入淡出效果。
當然這裡是<i>元素，不是div，當然div也不成任何問題了，這裡只是方便演示而已。
transition-duration屬性可以參閱CSS3的transition-duration 屬性詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16813
更多內容可以參閱:http://www.softwhy.com/divcss/
