摘要：

　　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. sed——linux下对文本当控制操作（替换，追加）

    sed——linux下对文本当控制操作(替换,追加) 2011-12-12 19:27:17 分类: LINUX Linux下sed命令 1. Sed简介 sed 是一种在线编辑器,它一次处理一行内容 ...

  2. Java后端，应该日常翻看的中文技术网站<转>

    你还在学习吗? 1.内容生产者 InfoQ中文技术第一站,佩服霍老板,真金白银地为中国程序员们生产内容. ImportNew专门面向Java的内容生产者兼聚合者,偶然也有些面向入门的小白文. 并发编程 ...

  3. Spark的机器学习算法mlib的例子运行

    Spark自带了机器学习的算法mlib,页面网址 http://spark.incubator.apache.org/docs/latest/mllib-guide.html 但是运行的时候,遇到了很 ...

  4. oozie 运行demo

    昨晚装好了oozie,能启动了,并且配置了mysql作为数据库,好了,今天要执行oozie自带的demo了,好家伙,一执行就报错!报错很多,就不一一列举了,就说我最后解决的方法吧. oozie job ...

  5. CodeWarrior WarningC12056

    C12056:SP debug info incorrect because of optimization or inline assemble 该warning是代码最优化时(common cod ...

  6. 实现JTextfield 的右键 复制、剪切、粘贴功能。

    http://leagion.iteye.com/blog/572730 ——————————————————————————————————————————————————————————————— ...

  7. 为什么Java匿名内部类访问的外部局部变量或参数需要被final修饰

    大部分时候,类被定义成一个独立的程序单元.在某些情况下,也会把一个类放在另一个类的内部定义,这个定义在其他类内部的类就被称为内部类,包含内部类的类也被称为外部类. class Outer { priv ...

  8. MySQL 数据库 varchar 到底可以存多少个汉字，多少个英文呢?我们来搞搞清楚

    一.关于UTF-8 UTF-8 Unicode Transformation Format-8bit.是用以解决国际上字符的一种多字节编码. 它对英文使用8位(即一个字节) ,中文使用24位(三个字节 ...

  9. python3 解决zip解压中文乱码问题，亲测可用， ZipFile

    中文乱码是个很头疼的问题,找了好久都没用找到解决办法 后来也忘了在哪儿找到的解决办法, 很久以前了,但不可行, 解决了思路 在源码里面想要修改内容 if flags & 0x800: # UT ...

  10. C++视频课程

    一.视频课程 课程名称:C++学习教程 程序设计 C++基础教程 授课人:郭宏志 课程链接:http://study.163.com/course/courseMain.htm?courseId=63 ...