摘要：

　　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. [设备]Linux设备是否可以被多个进程或者线程同时Open？

    当然可以 只要底层driver没有对重复打开做特殊处理,一般都可以被两个进程open 那当两个进程同时打开一个设备,当此设备收到数据时,怎么能保证每个进程都能收到数据?

  2. 移动端报表JS开发演示样例

    近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...

  3. Redis PHP连接操作

    安装 在PHP程序中使用Redis,需要确保我们有Redis的PHP驱动程序和PHP安装设置在机器上.可以查看PHP教程教你如何在机器上安装PHP.现在,让我们来看看一下如何设置Redis的PHP驱动 ...

  4. 【转】【Mac】invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library

    异常原因 我在昨天升级了 macOX Sierra,悲剧的是,今天我发现git命令无法执行,homebrew也无法使用,这种情景我在升级OS X El Capitan也遇到过一次,完整异常提示如下: ...

  5. A SIMPLE LIBRARY TO BUILD A DEEP ZOOM IMAGE

    My current project requires a lot of work with Deep Zoom images. We recently received some very high ...

  6. 慎用 apt-get autoremove !

    apt-get 提供了一个用于下载和安装软件包的简易命令行界面. 卸载软件包主要有这3个命令 remove – 卸载软件包 autoremove – 卸载所有自动安装且不再使用的软件包 purge – ...

  7. 使用 pv 命令监控 linux 命令的执行进度

    如果你是一个 linux 系统管理员,那么毫无疑问你必须花费大量的工作时间在命令行上:安装和卸载软件,监视系统状态,复制.移动.删除文件,查错,等等.很多时候都是你输入一个命令,然后等待很长时间直到执 ...

  8. hashMap put方法 第三行代码

    inflateTable(threshold) 分析: Hi.java public class Hi { //临界值(一个值最接近2的n次幂的数,比如7的临界值为8) int threshold; ...

  9. Opencv-Python：图像尺寸、图像的读取、显示、保存与复制

    Opencv-Python:图像尺寸.图像的读取.显示.保存与复制 原创 2017年11月23日 21:30:49 4440 在使用opencv的方法时,首先必须导入opencv包.新的opencv导 ...

  10. (笔记)Mysql命令select from：查询表中的数据（记录）

    select from命令用来查询表中的数据. 1) 查询所有行命令格式: select <字段1, 字段2, ...> from < 表名 > where < 表达式 ...