Fade out transition effect using CSS3

简介: Fade out transition effect using CSS3

摘要:


 

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>



相关文章
|
1月前
|
前端开发 JavaScript UED
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
过渡效果的艺术:CSS transition 让网页交互更平滑(上)
|
30天前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
23 2
|
1月前
|
前端开发 JavaScript UED
CSS Transition(过渡效果)详解
CSS Transition(过渡效果)详解
|
1月前
|
前端开发 UED
深入理解CSS过渡效果(Transition):提升网页动画体验
深入理解CSS过渡效果(Transition):提升网页动画体验
81 1
|
1月前
|
Web App开发 前端开发 JavaScript
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
|
10月前
|
机器学习/深度学习 前端开发
HTML&CSS Day08 CSS transition过渡
HTML&CSS Day08 CSS transition过渡
48 0
|
10月前
|
前端开发
CSS 中过渡动画(transition)的使用
CSS 中过渡动画(transition)的使用
54 0
|
10月前
|
JavaScript
CSS3 transition - 通知消息轮播条
CSS3 transition - 通知消息轮播条
80 0
|
11月前
|
机器学习/深度学习 自然语言处理 前端开发
CSS3动画属性之Transition
CSS3动画属性之Transition
84 0
|
前端开发 Linux 程序员
「CSS」知识点笔记:transition
「CSS」知识点笔记:transition
137 0
「CSS」知识点笔记:transition