CSS3背景图片缩放动画
- <!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">
- body{padding:0;margin:0;}
- /*放大镜效果*/
- @-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.03);-webkit-transparent:0.5
- -moz-opacity:0.5;
- -khtml-opacity: 0.5;
- opacity: 0.5;}
- 100%{-webkit-transform:scale(1);filter:alpha(opacity=50);
- }
- }
- div{ height:1000px; margin:0 auto;border:solid 1px #ccc; background:url(1.jpg);text-align:center;-webkit-animation:heart_beat 1s ease-in-out;}
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </html>
============ 欢迎各位老板打赏~ ===========
与本文相关的文章
