Membuat latar awan bergerak menggunakan CSS

Membuat latar awan bergerak menggunakan CSS

  06 January    Andika

---

Kali ini saya akan berbagi kode CSS untuk membuat sebuah latar dengan objek awan yang bergerak.

Semua element dan animasi yang di gunakan, murni mengandalkan CSS. Latar utamanya memanfaatkan efek gradient dengan memadukan warna yang di hasilkan dari #c9dbe9 dan #fff sehingga membentuk latar yang menyerupai langit yang putih ke biruan. Awannya di bentuk dengan memanfaatkan fungsi border-radius. Dan untuk animasinya di serahkan kepada keyframes.

Langsung saja, berikut demonya.

Kode CSSnya

#awannya {
  padding:100px 0;
  background:#c9dbe9;
  background:-webkit-linear-gradient(top,#c9dbe9 0%,#fff 100%);
  background:-linear-gradient(top,#c9dbe9 0%,#fff 100%);
  background:-moz-linear-gradient(top,#c9dbe9 0%,#fff 100%);
}

.awan {
  width:200px;
  height:60px;
  background:#fff;
  border-radius:200px;
  -moz-border-radius:200px;
  -webkit-border-radius:200px;
  position:relative;
}

.awan:before,
.awan:after {
  content:'';
  position:absolute;
  background:#fff;
  width:100px;
  height:80px;
  position:absolute;
  top:-15px;
  left:10px;
  border-radius:100px;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);
  -moz-transform:rotate(30deg);
}

.awan:after {
  width:120px;
  height:120px;
  top:-55px;
  left:auto;
  right:15px;
}

.x1 {
  -webkit-animation:awanbergerak 15s linear infinite;
  -moz-animation:awanbergerak 15s linear infinite;
  -o-animation:awanbergerak 15s linear infinite;
  animation:awanbergerak 15s linear infinite;
}

.x2 {
  left:200px;
  -webkit-transform:scale(0.6);
  -moz-transform:scale(0.6);
  transform:scale(0.6);
  opacity:0.6;
  -webkit-animation:awanbergerak 25s linear infinite;
  -moz-animation:awanbergerak 25s linear infinite;
  -o-animation:awanbergerak 25s linear infinite;
  animation:awanbergerak 25s linear infinite;
}

.x3 {
  left:-250px;
  top:-200px;
  -webkit-transform:scale(0.8);
  -moz-transform:scale(0.8);
  transform:scale(0.8);
  opacity:0.8;
  -webkit-animation:awanbergerak 20s linear infinite;
  -moz-animation:awanbergerak 20s linear infinite;
  -o-animation:awanbergerak 20s linear infinite;
  animation:awanbergerak 20s linear infinite;
}

.x4 {
  left:470px;
  top:-250px;
  -webkit-transform:scale(0.75);
  -moz-transform:scale(0.75);
  transform:scale(0.75);
  opacity:0.75;
  -webkit-animation:awanbergerak 18s linear infinite;
  -moz-animation:awanbergerak 18s linear infinite;
  -o-animation:awanbergerak 18s linear infinite;
  animation:awanbergerak 18s linear infinite;
}

.x5 {
  left:-150px;
  top:-150px;
  -webkit-transform:scale(0.8);
  -moz-transform:scale(0.8);
  transform:scale(0.8);
  opacity:0.8;
  -webkit-animation:awanbergerak 20s linear infinite;
  -moz-animation:awanbergerak 20s linear infinite;
  -o-animation:awanbergerak 20s linear infinite;
  animation:awanbergerak 20s linear infinite;
}

@-webkit-keyframes awanbergerak {
  0% {
    margin-left:1000px;
  }
  100% {
    margin-left:-1000px;
  }
}

@-moz-keyframes awanbergerak {
  0% {
    margin-left:1000px;
  }
  100% {
    margin-left:-1000px;
  }
}

@-o-keyframes awanbergerak {
  0% {
    margin-left:1000px;
  }
  100% {
    margin-left:-1000px;
  }

@keyframes awanbergerak {
  0% {
    margin-left:1000px;
  }
  100% {
    margin-left:-1000px;
  }
}

Kode HTMLnya

<div id="awannya">
    <div class="awan x1"></div>
    <div class="awan x2"></div>
    <div class="awan x3"></div>
    <div class="awan x4"></div>
    <div class="awan x5"></div>
</div>

Animasi dan CSS sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox dan Google Chrome!