CSS3实现背景的无限滚动

实现原理很简单~CSS3 的animation效果,配合160s循环改变background的position属性来实现~

CSS3实现代码如下~

<code>
<style type="text/css">
#css3animationforbg {
background: url(http://yesdesigning.com/img/srbg3.jpg) repeat-x center 0;
height: 400px;
width:500px;
clear: both;
animation: animatedBackground 160s linear infinite;
-o-animation: animatedBackground 160s linear infinite;
-ms-animation: animatedBackground 160s linear infinite;
-moz-animation: animatedBackground 160s linear infinite;
-webkit-animation: animatedBackground 160s linear infinite;
}

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: -3168px 0; }
}
@-webkit-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: -3168px 0; }
}
@-ms-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: -3168px 0; }
}
@-moz-keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: -3168px 0; }
</style>
}</code>

0 thoughts on “CSS3实现背景的无限滚动
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。