css3简易动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 400px;
height: 400px;
border: 12px solid rgba(1,1,1,0.4);
background: url(work4.jpg) no-repeat;
-webkit-animation: showing 5s linear infinite;
float: left;
}
@-webkit-keyframes showing{ /*兼容webkit内核浏览器*/
0%{background-position:left top;}
10%{background-position:10% top;background-size: 160px 160px;}
20%{background-position:30% top;background-size: 140px 160px;}
30%{background-position:60% top;background-size: 100px 100px;}
48%{background-position:60% 30%;background-size: 80px 100px;}
50%{background-position:60% bottom;background-size: 100px 80px;}
52%{background-position:60% 60%; background-size: 160px 120px;}
58%{background-position:60% 30%; background-size: 160px 160px;}
70%{background-position:50% 50%;background-size: 160px 180px;}
100%{background-position:left top;background-size: 200px 230px;}
}
@-moz-keyframes showing{ /*兼容火狐*/
0%{background-position:left top;}
10%{background-position:10% top;background-size: 160px 160px;}
20%{background-position:30% top;background-size: 140px 160px;}
30%{background-position:60% top;background-size: 100px 100px;}
48%{background-position:60% 30%;background-size: 80px 100px;}
50%{background-position:60% bottom;background-size: 100px 80px;}
52%{background-position:60% 60%; background-size: 160px 120px;}
58%{background-position:60% 30%; background-size: 160px 160px;}
70%{background-position:50% 50%;background-size: 160px 180px;}
100%{background-position:left top;background-size: 200px 230px;}
}
@-o-keyframes showing{ /*兼容opera*/
0%{background-position:left top;}
10%{background-position:10% top;background-size: 160px 160px;}
20%{background-position:30% top;background-size: 140px 160px;}
30%{background-position:60% top;background-size: 100px 100px;}
48%{background-position:60% 30%;background-size: 80px 100px;}
50%{background-position:60% bottom;background-size: 100px 80px;}
52%{background-position:60% 60%; background-size: 160px 120px;}
58%{background-position:60% 30%; background-size: 160px 160px;}
70%{background-position:50% 50%;background-size: 160px 180px;}
100%{background-position:left top;background-size: 200px 230px;}
}
</style>
</head>
<body>
<div id="box1">
</div>
</body>
</html>

posted @ 2016-11-20 22:17  2016继续走  阅读(64)  评论(0)    收藏  举报