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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 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
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
django 创建过滤器的实例详解
2017/08/14 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
最新的互联网创业计划书
2014/01/10 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
车辆管理制度范本
2015/08/05 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python