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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
python删除不需要的python文件方法
2018/04/24 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
用python发送微信消息
2020/12/21 Python
Python脚本调试工具安装过程
2021/01/11 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
神路信息Java面试题目
2013/03/31 面试题
本科毕业生求职自荐信
2014/04/09 职场文书
志愿者活动总结
2014/04/28 职场文书
2014年教研组工作总结
2014/11/26 职场文书
幼儿园教师求职信
2015/03/20 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技