实现原理很简单~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>
<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>