CSS3实现的鼠标悬浮跟移开div淡入淡出效果

CSS3实现的鼠标悬浮和移开div淡入淡出效果

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/

CSS3实现的鼠标悬浮跟移开div淡入淡出效果

相关推荐