CSS3使用transition实现的鼠标悬停淡入淡出


Posted in HTML / CSS onJanuary 09, 2015

摘要:

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>

效果是不是非常棒,小伙伴们自由发挥下即可使用到自己的项目中去了。

HTML / CSS 相关文章推荐
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 #HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 #HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 #HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 #HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 #HTML / CSS
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
Js四则运算函数代码
2012/07/21 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python实现Adapter模式实例代码
2018/02/09 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
关于VPN
2012/06/10 面试题
深圳茁壮笔试题
2015/05/28 面试题
学生出入校管理制度
2014/01/16 职场文书
药学职务聘任书
2014/03/29 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
参加招聘会后的感想
2015/08/10 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python办公自动化解决world文件批量转换
2021/09/15 Python