CSS3多重背景结合动画打造会飘动的热气球

1、引入所需要的图片，分别定义他们的位置，其中background-position: x轴 y轴，x轴 y轴;注意要和图片一一对应。

2、添加动画与关键帧

布局：

 <div id="wrap">
        <h1>飞喽</h1>
        <div class="banner"></div>
    </div>

样式：

*{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 90%;
            margin: 0 auto;
            padding: 1.25em;
        }
        h1{
            font-size: 2.5em;
            color: skyblue;
            text-align: center;
            margin: 1em 0;
        }
        .banner{
            width: 100%;
            min-width: 1200px;
            height: 280px;
            overflow: hidden;
            background: url(img/cloud-6.png), url(img/cloud-5.png),url(img/cloud-4.png), url(img/corel.png),
            url(img/cloud-3.png) , url(img/cloud-2.png) ,url(img/cloud-1.png), url(img/aws-bg.jpg);
            /* 分别定义图片的位置background-position: x轴 y轴，x轴 y轴; */
            background-position: 180% 100px,120% 110px,-350px 50px,5px 1%,120% -40px,10% 10px, 90% 10px,0 0;
            background-size: 70%,60%,65%,5%,40%,30%,30%,100%;
            background-repeat: no-repeat;
            animation: ship 7s ease-in forwards;
        }
        @keyframes ship {
            0%{
                /* 第四个为热气球的位置 */
                background-position-x: 150%, 120%, -350px, 5px, 120%, 10%, 90%, 0px;
                background-position-y: 100px, 110px, 50px, 100%, -40px, 10px, 10px, 0px;
            }
            100%{
                background-position-x: 200%, 150%, -500px, 1800px, 130%, 0%, 100%, 0px;
                background-position-y: 100px, 110px, 50px, 1%, -40px, 10px, 10px, 0px;
            }
        }

查看：