多重背景的CSS动画

2014-01-22阅读(4791)评论(0)牵着狗狗看MM

苏州实时公交查询

CSS背景动画在很长时间内一直是一个热门话题,主要因为不需要额外的元素,看起来效果也不错。如果是有多重背景的CSS动画呢,下面我们来看下是如何实现的。
先上个效果图:

多重背景的CSS动画效果图

多重背景的CSS动画效果图

CSS代码

[css]
@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 -90px, 30px 80px, 0 0;
}
to {
background-position: 300px -90px, 30px 20px, 100% 0;
}
}
.animate-area2 {
width: 560px;
height: 190px;
background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.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;
}

[/css]

HTML代码

[html]<div class="animate-area2"></div>
[/html]

demo演示地址:http://www.w3cways.com/example?pid=1198

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 多重背景的CSS动画
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏