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 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php递归创建目录的方法
2015/02/02 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python实现打砖块游戏
2020/02/25 Python
简单了解Python write writelines区别
2020/02/27 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
自我评价的写作规则
2014/01/06 职场文书
策划总监岗位职责
2014/02/16 职场文书
葬礼司仪主持词
2014/03/31 职场文书
统计专业自荐书
2014/07/06 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
企业整改报告范文
2014/11/08 职场文书
晚会开幕词范文
2016/03/04 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python
MySQL自定义函数及触发器
2022/08/05 MySQL