这个案例的素材来自于htmleaf，要实现这个效果有好几种方法，在这里为了表现出CSS3的多重背景，以及可以用background-position做动画，选用了这种方法。

查看效果

下载地址

链接: https://pan.baidu.com/s/1gfy5PiN 密码: 9tp8

一、案例知识点

• background的多重背景加position定位

• background-size控制背景大小

• 利用background-position完成animation动画

二、主要代码

1、HTML代码

<div id="wrap">
    <h1>CSS3多重背景结合动画打造会飘动的热气球banner</h1>
    <div class="banner"></div>
    <footer>
        <p>赵老师web前端开发教学博客</p>
        <p><a href="http://www.mrszhao.com" target="_blank">www.mrszhao.com</a></p>
  </footer>
</div>

2、主要CSS代码

.banner{
	width:100%;
	min-width:1200px;
	height:280px;
	overflow:hidden;
	background:url(images/cloud-6.png), url(images/cloud-5.png),url(images/cloud-4.png), url(images/corel.png),url(images/cloud-3.png) , url(images/cloud-2.png) ,url(images/cloud-1.png), url(images/aws-bg.jpg) ;
	background-position:180% 100px,120% 110px,-350px 50px,50px center,120% -40px,10% 10px, 90% 10px,0 0;
	background-size:70%,60%,65%,5%,40%,30%,30%,100%;
	background-repeat:no-repeat;
	animation:cloudsMove 5s ease-out forwards;
}
@keyframes cloudsMove{
	0%{
		background-position:150% 100px,120% 110px,-350px 50px,50px center,120% -40px,10% 10px, 90% 10px,0 0;
		}
	100%{
		background-position:200% 100px,150% 110px,-500px 50px,850px center,130% -40px,0% 10px, 100% 10px,0 0;
		}
	}

用background-position可以实现动画效果，但是很受限制，因为必须一一对应，不能单独控制某张背景图片。

最好的办法还是使用相对和绝对定位，然后控制left/right/top/bottom的值来实现，或者使用transform的translate来实现动画。

这里只是提供了一种方式。