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,js)
Dec 12 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 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
VOLVO车载收音机
2021/03/02 无线电
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
浅谈Vue数据响应
2018/11/05 Javascript
vue实现搜索功能
2019/05/28 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
大学生社会实践评语
2014/04/25 职场文书
市场营销策划方案
2014/06/11 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
党校培训学习心得体会
2016/01/06 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android