您的位置：首页 > Web前端 > CSS

CSS3使用transition实现的鼠标悬停淡入淡出

2015-01-09 10:48 676 查看
摘要：
　　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>


效果是不是非常棒，小伙伴们自由发挥下即可使用到自己的项目中去了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航