CSS3滑鼠懸浮和移開div淡入淡出效果

admin發表於2017-11-17
CSSS3

本章節介紹一下如何利用css3實現滑鼠懸浮和離開div實現淡入淡出效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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一章節。

相關文章