css3 背景循环,css3背景运动

两个css3背景运动实例,一个是图片,一个是渐变。关键点就在于定义背景的位置,使之可以循环往复,注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅,第一个就是背景的平铺,至于第二个也可以设置一个背景,或者直接设置一个border-top什么的都可以。

第一个实例的主要css3代码:

body{

background:url('../images/header_bg.png') repeat-x 0 0;

-moz-animation-name:bgscroll;

-moz-animation-duration:15s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-webkit-animation-name:bgscroll;

-webkit-animation-duration:15s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

animation-name:bgscroll;

animation-duration:15s;

animation-timing-function:linear;

animation-iteration-count:infinite;

padding-top:100px;

}

@-moz-keyframes bgscroll{

0%{

background-position: 0 -60px;

}

100%{

background-position: -940px -60px;

}

}

@-webkit-keyframes bgscroll{

0%{

background-position: 0 -60px;

}

100%{

background-position: -940px -60px;

}

}