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

大致思路：

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

2、添加动画与关键帧

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;
    }
}

x轴与平常认知一样，但y轴相反，正值是下方，负值是上方。

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

css

* {
  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;
  }
}

代码演示：