<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<TITLE>CSS3 sensor mouse background flicker and picture zoom dynamic effect </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<style type= "Text/css" >
/* Title Background */
H2{background:rgba (0,0,0,0.5); color: #FFF;p adding: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);}}
/* Magnifier effect */
A{display:block;width:50px;height:50px;border-radius:50%;background: #000; transition:opacity 0.2s linear 0s; Background:url (Eye.png) no-repeat;} /* Take it as a magnifying glass * *
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;p Adding:20px;background:rgba (255,255,255,0.5); Text-align: Center;}
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div>
<a></a>
</div>
</body>
CSS3 Sensing mouse background flicker and picture zoom effect
