摘要：

　　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>

效果：

鼠标悬过就可以看到效果了

         

Fade out transition effect using CSS3的更多相关文章

  1. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  2. css3 transition effect(其它效果)

    http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...

  3. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  4. CSS3 笔记四（Transforms/Transition/Animations）

    CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...

  5. 总结CSS3新特性(Transition篇)

    CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...

  6. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  7. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  8. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  9. css3 - transform, transition 与 translate

    零.序言 css 3 的新特性,很多都停留在听说而非实际使用.transform, transition, translate 这三长得实在太像,刚开始的时候总是迷迷糊糊,分不清它们的功能.而最近新接 ...

随机推荐

  1. git 无法提交空目录

    git不能提交子文件夹?   空目录无法add,在最里面的目录下加上随便加上一个txt就可以了

  2. 微信小程序——wxParse使用方法

    wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxPar ...

  3. Java设计模式（2）单态模式（Singleton模式）

    定义:Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 在很多操作中,比如建立目录 数据库连接都需要这样的单线程操作. 还有,singleton能够被状态化 ...

  4. E/MediaPlayer: start called in state 4, mPlayer(0xcc719a40)解决

    在使用MediaPlayer播放音频时报出 E/MediaPlayer: start called in state 4, mPlayer(0xcc719a40)错误 贴出代码 mMediaPlaye ...

  5. 关于Unity中的光照(五)

    Mobile Diffuse Unity自带的一种shader,用的比较多,性能还可以.我们默认创建的unit shader基本和它一致,但是没有参与光照计算,看起来和Mobile Diffuse有区 ...

  6. (笔记)如何安装Arm-linux-gcc

      如何安装Arm-linux-gcc   安装交叉编译工具链: 1.首先以root用户登入 2.复制arm-linux-gcc-4.3.2.tgz到根目录下tmp文件夹里 3.解压命令tar xvz ...

  7. QWSLock::up(): Invalid argument

    运行qt时,点击QMessageBox的确定按钮是出现错误QWSLock::up(): Invalid argument, QWSLock::down(): Invalid argument,这个是q ...

  8. C语言中的控制语句： 判断、环循等；

    列举这一部分的目的就是注意它的写法,尤其是 分号 : 的位置: 1. if-else if else 语句: if (表达式1) 语句1: else if (表达式2) 语句2: else 语句3: ...

  9. JUnit套件测试实例

    “套件测试”是指捆绑了几个单元测试用例并运行起来.在JUnit中,@RunWith 和 @Suite 这两个注解是用来运行套件测试. 下面的例子演示这两个单元测试:JunitTest1 和 Junit ...

  10. e786. 创建JSpinner组件

    This example demonstrates how to build three kinds of spinners. A number spinner: // Create a number ...