Home >Web Front-end >HTML Tutorial >CSS3实现的鼠标悬浮和移开div淡入淡出效果_html/css_WEB-ITnose
CSS3实现的鼠标悬浮和移开div淡入淡出效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:27:442073browse
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> 上面的代码实现了我们的效果，当鼠标悬浮可以实现元素的淡入淡出效果。
当然这里是元素，不是div，当然div也不成任何问题了，这里只是方便演示而已。
transition-duration属性可以参阅CSS3的transition-duration 属性详解一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16813
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css实现的div垂直居中效果代码实例_html/css_WEB-ITnoseNext article：Jsoup代码解读之一-概述_html/css_WEB-ITnose