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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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/05/03 PHP
php解析url的三个示例
2014/01/20 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
php strftime函数的详细用法
2018/06/21 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
js的一些常用方法小结
2011/06/29 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python使用RNN实现文本分类
2018/05/24 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Python实现信息管理系统
2022/06/05 Python
mysql sql常用语句大全
2022/06/21 MySQL