摘要：

　　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. JMeter (3) —— JMeter录制脚本并压力测试用户登陆场景以CAS SSO为例（101 Tutorial）

    JMeter (3) -- JMeter录制脚本并压力测试用户登陆场景以CAS SSO为例(101 Tutorial) 主要内容 JMeter录制脚本并进行压力测试用户登陆场景,并以CAS SSO单点 ...

  2. Django添加防跨站请求伪造中间件

    第一步: 在全局设置中打开此中间件: MIDDLEWARE_CLASSES = [ ... 'django.middleware.csrf.CsrfViewMiddleware', ... ]     ...

  3. 彻底清除Github上某个文件以及历史

    注意:如下操作会删除选中的文件以及历史记录,若你想保留最新版本的记录,请做好备份. cd进入到你的本地项目文件夹,然后依次执行下面6行命令即可: git filter-branch --force - ...

  4. APICloud 实践 —— 手机端预览项目

    上一次讲到如何创建一个应用,今天讲下如何在手机端预览项目. 1.下载 AppLoader 下载地址:https://docs.apicloud.com/Download/download#apploa ...

  5. 微信小程序——获取元素的宽高等属性

    微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...

  6. Java 内部线程

    InsttoolCacheScheduler_ Worker-2 Quartz InsttoolCacheScheduler_Worker-2线程就是ThreadPool线程的一个简单实现,它主要负责 ...

  7. PoseNet: A Convolutional Network for Real-Time 6-DOF Camera Relocalization

    用卷积神经网络对相机位置和角度进行回归.

  8. e867. 获取和设置外观

    To change the look and feel, you need to know the class name of the new look and feel. This example ...

  9. e860. 列出组件绑定的键盘键

    This example demonstrates how to list all the key bindings in a component. Text components have an a ...

  10. Win10无法使用内置管理员用户打开edge解决方案

    https://jingyan.baidu.com/article/4f7d5712d23f1b1a2119274b.html