css定义多重背景动画

最新推荐文章于 2025-01-03 14:10:47 发布

转载最新推荐文章于 2025-01-03 14:10:47 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/brittany/p/4730309.html

展示效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0; border: 0;}
@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-webkit-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-ms-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
@-moz-keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area{ 
margin: 100px auto 0;
width: 560px; 
height: 190px; 
background-image: url('http://static.oschina.net/uploads/space/2015/0814/152322_gbDp_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_7IfI_2435847.png'), url('http://static.oschina.net/uploads/space/2015/0814/152322_Xtfs_2435847.png');
background-position: 20px -90px, 30px 80px, 0px 0px;
background-repeat: no-repeat, no-repeat, repeat-x;
animation: animatedBird 4s linear infinite;
-ms-animation: animatedBird 4s linear infinite;
-moz-animation: animatedBird 4s linear infinite;
-webkit-animation: animatedBird 4s linear infinite;
overflow: hidden;
}
</style>
</head>
<body>
<div class="animate-area"></div>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/brittany/p/4730309.html