CSS3感应鼠标的背景闪烁和图片缩放动画效果


Posted in HTML / CSS onMay 14, 2014

CSS3感应鼠标的背景闪烁和图片缩放动态效果,鼠标滑过时增加了一点动画效果,当鼠标放在眼睛上的时候,眼睛会闪动几下,CSS3环境下运行,ie8不能运行

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3感应鼠标的背景闪烁和图片缩放动态效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/*标题背景*/
h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}
h2:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}
h2,a{cursor:pointer;margin:10px auto;}
@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.5);}
100%{background:rgba(144,24,53,0.18);}}
@-webkit-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.3);}
100%{background:rgba(144,24,53,0.18);}}
/*放大镜效果*/
a{display:block;width:50px;height:50px;border-radius:50%;background:#000;transition:opacity 0.2s linear 0s;background:url(http://www.codefans.net/jscss/demoimg/201211/eye.png) no-repeat;}/*就把它当做放大镜吧*/
a:hover{-moz-animation:heart_beat .5s ease-in-out;-webkit-animation:heart_beat .5s ease-in-out;}
@-moz-keyframes heart_beat{0%{-moz-transform:scale(1)}
25%{-moz-transform:scale(1.70)}
50%{-moz-transform:scale(0.9)}
75%{-moz-transform:scale(1.55)}
100%{-moz-transform:scale(1)}}
@-webkit-keyframes heart_beat{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(1.70)}
50%{-webkit-transform:scale(0.9)}
75%{-webkit-transform:scale(1.55)}
100%{-webkit-transform:scale(1)}}
div{width:500px;margin:0 auto;border:solid 1px #ccc;padding:20px;background:rgba(255,255,255,0.5);text-align:center;}
</style>
</head>
<body>
<div>
<h1>鼠标滑过增加一点动画</h1>
<h2>前端工程师的生活</h2>
<a></a>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 #HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 #HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 #HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 #HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 #HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 #HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 #HTML / CSS
You might like
简单的php文件上传(实例)
2013/10/27 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python基于event实现线程间通信控制
2020/01/13 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
用Python 执行cmd命令
2020/12/18 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
销售团队口号大全
2014/06/06 职场文书
甘南现象心得体会
2014/09/11 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
Python 中面向接口编程
2022/05/20 Python