css3背景运动

css3背景运动

两个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

air max 90 essential discount

如需转载,烦请注明出处:https://www.w3cplus.com/demo/382.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部