Fade out transition effect using CSS3
摘要:
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的更多相关文章
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- css3 transition effect(其它效果)
http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...
- 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
- CSS3 笔记四(Transforms/Transition/Animations)
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
- 总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- css3动画入门transition、animation
css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...
- css3 - transform, transition 与 translate
零.序言 css 3 的新特性,很多都停留在听说而非实际使用.transform, transition, translate 这三长得实在太像,刚开始的时候总是迷迷糊糊,分不清它们的功能.而最近新接 ...
随机推荐
- u-boot2016.05 有关 4096page size , oob == 224 nand 的移植支持
大致介绍一下这个 nand 的基础属性 pagesize == 4096 byte oob == 224 byte block size == 256 Kbyte u-boot configs/xxx ...
- Dubbo相关博文整理
configServer配置中心在dubbo client和 dubbo server之间的作用 http://www.cnblogs.com/dengzy/p/5677531.html dubbo ...
- Android——自定义视图(一)转
首先,建立一个Android工程,命名MyView. 然后,自定义一个类myView,继承View类.代码如下 package com.android.randy.viewDemo; import a ...
- c# 自动计算字符串的宽度
测试代码: string str = "字符串"; var width = TextRenderer.MeasureText(str, this.Font); var width2 ...
- Redis有序集合
Redis有序集合类似Redis集合存储在设定值唯一性.不同的是,一个有序集合的每个成员带有分数,用于以便采取有序set命令,从最小的到最大的分数有关. Redis 有序set添加,删除和测试中的O( ...
- java 生成指定区间随机数
int randNumber =rand.nextInt(MAX - MIN + 1) + MIN; // randNumber 将被赋值为一个 MIN 和 MAX 范围内的随机数
- 我写的javascript常用静态方法类,分享给大家
util=function(){ return { $:function(id){ return document.getElementById(id); ...
- Writing a Reusable Custom Control in WPF
In my previous post, I have already defined how you can inherit from an existing control and define ...
- linux进程的挂起和恢复
进程的挂起及恢复 #ctrl+z:挂起,程序放到后台,程序没有结束. #jobs:查看被挂起的程序工作号 恢复进程执行时,有两种选择:fg命令将挂起的作业放回到前台执行:用bg命令将挂起的作业放到后台 ...
- 实践:C++平台迁移以及如何用C#做C++包装层
在前面,我们看过OpenTK与MOgre,这二个项目都是C#项目,但是他的实现都是C++.他们简单来说就是一个包装层.常见的包装方式有二种,一种就是我们熟知的显式P/Invoke(DllImport) ...