CSS3背景图片缩放动画

分类

现在位置: 首页＞前端＞正文

CSS3背景图片缩放动画

2015-01-22 16:46 前端暂无评论阅读(3,478)

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