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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“CSS3实现感应鼠标的背景闪烁和图片缩放动画效果”，在日常操作中，相信很多人在CSS3实现感应鼠标的背景闪烁和图片缩放动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3实现感应鼠标的背景闪烁和图片缩放动画效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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">

h3{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}
h3:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}
h3,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(/file/upload/202210/19/v0qusrnsnlc.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>
<h2>鼠标滑过增加一点动画</h2>
<h3>前端工程师的生活</h3>
<a></a>
</div>
</body>
</html>