摘要：

　　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. MAC版Eclipse的常用快捷键

    一.Command类 Command+1 快速修复 Command+d 删除当前行 Command+Option+↓ 复制当前行到下一行 Command+Option+↑ 复制当前行到上一行 Comm ...

  2. 教你如何禁用U盘、屏蔽USB端口的三种方法

    如果想禁止所有U盘的使用,则可以通过修改注册表来实现. 打开”运行“对话框,输入命令“Regedit”进入注册表界面.   依次展开“HKEY_LOCAL_MACHINE”→“SYSTEM”→“ Cu ...

  3. Java编程的逻辑 (38) - 剖析ArrayList

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  4. MySQL 5.6 GTID 原理以及使用

    转自:http://hamilton.duapp.com/detail?articleId=47 简介 GTID是MySQL 5.6的新特性,其全称是Global Transaction Identi ...

  5. 虚拟机安装以及PCL的配置（1）

    安装虚拟机 (1)   下载VMware安装(自己百度一下,会有很多可供下载的) (2)   安装方式: 双击,一路点击next,不用更改安装路径(当然你也可以更改),选择安装“典型”即可 接着就有安 ...

  6. DBExportDoc V1.0 For MySQL

    win7系统下或者64位系统下,安装完mysql-connector-odbc驱动后,直接进入:管理工具--数据源(ODBC),点击添加不显示该驱动,该问题解决如下:进入dos命令行,输入:C:\Us ...

  7. greendao数据库初次使用的配置及多表关联的初始化

    1.在工程外层(Project)的build.gradle中添加依赖 buildscript { repositories { jcenter() } dependencies { classpath ...

  8. SpannableString属性详解

    1.BackgroundColorSpan 背景色     2.ClickableSpan 文本可点击,有点击事件    3.ForegroundColorSpan 文本颜色(前景色)    4.Ma ...

  9. 【转载】K-NN算法 学习总结

    声明:作者:会心一击 出处:http://www.cnblogs.com/lijingchn/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  10. 优化 PHP 代码技巧

    优化 PHP 代码技巧1. 如果一个方法能被静态,那就声明他为静态的,速度可提高 1/4;2. echo 的效率高于 print,因为 echo 没有返回值,print 返回一个整型;3. 在循环之前 ...