今天小编跟大家讲解下有关CSS3使用transition实现的鼠标悬停淡入淡出 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3使用transition实现的鼠标悬停淡入淡出 的相关资料，希望小伙伴们看了有所帮助。
摘要： css3已经被应用到很多网站了 对于创建动态交互的网站是非常有益的。今天就分享一个使用transition实现的鼠标悬停淡阴淡出的效果。
代码：
复制代码代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</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>
效果是不是非常棒 小伙伴们自由发挥下即可使用到自己的项目中去了。
来源：爱蒂网
