css3大背景运动

特别声明:开通VIP通道,年费价格为 ¥199.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3大背景运动

其实这个的大背景运用和之前背景运动的那个demo,核心点都是一样的,关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片,注意多背景图片时其层次与其书写顺序有关,其层次高低随着书写顺序依次递减,所以第一张图片在最高层,所以这个时候千万不要定义背景色啊,不然会把后面的全部覆盖了。如果要写背景色的话,请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些零散的效果,当然首先得把背景图片设计好。

demodownload

css主要代码:

body{
	background:url('../images/foreground.png') 5px 5px,url("../images/midground.png") 1050px 750px,url("../images/background.png") 1000px -50px;

	-moz-animation-name:bgmove;
	-moz-animation-duration:30s;
	-moz-animation-timing-function:linear;
	-moz-animation-delay:0;
	-moz-animation-iteration-count:infinite;
		
	-webkit-animation-name:bgmove;
	-webkit-animation-duration:30s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0;
	-webkit-animation-iteration-count:infinite;
		
	animation-name:bgmove;
	animation-duration:30s;
	animation-timing-function:linear;
	animation-delay:0;
	animation-iteration-count:infinite;
}
@-moz-keyframes bgmove{
    0%{
        background:url('../images/foreground.png') 5px 5px,url("../images/midground.png") 1050px 750px,url("../images/background.png") 1000px -50px;
    }
    100%{
        background:url('../images/foreground.png') 2005px 1005px,url("../images/midground.png") 50px -250px,url("../images/background.png") 0 950px;

    }
}
@-webkit-keyframes bgmove{
    0%{
        background:url('../images/foreground.png') 5px 5px,url("../images/midground.png") 1050px 750px,url("../images/background.png") 1000px -50px;
    }
    100%{
        background:url('../images/foreground.png') 2005px 1005px,url("../images/midground.png") 50px -250px,url("../images/background.png") 0 950px;
    }
}

demodownload

灵感及文中所用图片来源:http://www.paulrhayes.com/2009-04/auto-scrolling-parallax-effect-without-javascript/

Air Max 95 Stussy

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

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

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