Google Reader

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

demodownload

第一个实例的主要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;
    }
}

demodownload