CSS Background Animasi Partikel

0
351

Kali ini saya membuat background dengan partikel yang bergerak dengan kode HTML dan CSS. Hanya dengan HTML dan CSS kita dapat membuat background yang keren dan anda bisa merombak sesuai keinginan anda setelah paham.

PERSIAPAN

Buatlah folder Background Partikel untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Partikel</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <!-- Inspired by: https://codepen.io/natewiley/pen/Ciwyn -->
<div id="particle-container">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
</div>
</body>
</html>

 

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

body {
  background: #f4f4f4;
}
.particle {
  position: absolute;
  border-radius: 50%;
}
@keyframes particle-animation-1 {
  100% {
    transform: translate3d(13vw, 63vh, 33px);
  }
}
.particle:nth-child(1) {
  animation: particle-animation-1 60s infinite;
  opacity: 0.07;
  height: 8px;
  width: 8px;
  animation-delay: -0.2s;
  transform: translate3d(38vw, 83vh, 6px);
  background: #afd926;
}
@keyframes particle-animation-2 {
  100% {
    transform: translate3d(74vw, 64vh, 87px);
  }
}
.particle:nth-child(2) {
  animation: particle-animation-2 60s infinite;
  opacity: 0.43;
  height: 6px;
  width: 6px;
  animation-delay: -0.4s;
  transform: translate3d(46vw, 67vh, 77px);
  background: #5026d9;
}
@keyframes particle-animation-3 {
  100% {
    transform: translate3d(5vw, 18vh, 39px);
  }
}
.particle:nth-child(3) {
  animation: particle-animation-3 60s infinite;
  opacity: 0.54;
  height: 6px;
  width: 6px;
  animation-delay: -0.6s;
  transform: translate3d(80vw, 29vh, 2px);
  background: #2674d9;
}
@keyframes particle-animation-4 {
  100% {
    transform: translate3d(41vw, 20vh, 12px);
  }
}
.particle:nth-child(4) {
  animation: particle-animation-4 60s infinite;
  opacity: 0.44;
  height: 9px;
  width: 9px;
  animation-delay: -0.8s;
  transform: translate3d(82vw, 35vh, 10px);
  background: #80d926;
}
@keyframes particle-animation-5 {
  100% {
    transform: translate3d(6vw, 20vh, 3px);
  }
}
.particle:nth-child(5) {
  animation: particle-animation-5 60s infinite;
  opacity: 0.21;
  height: 10px;
  width: 10px;
  animation-delay: -1s;
  transform: translate3d(24vw, 37vh, 28px);
  background: #bb26d9;
}
@keyframes particle-animation-6 {
  100% {
    transform: translate3d(5vw, 85vh, 61px);
  }
}
.particle:nth-child(6) {
  animation: particle-animation-6 60s infinite;
  opacity: 0.57;
  height: 10px;
  width: 10px;
  animation-delay: -1.2s;
  transform: translate3d(15vw, 72vh, 82px);
  background: #d99426;
}
@keyframes particle-animation-7 {
  100% {
    transform: translate3d(5vw, 78vh, 31px);
  }
}
.particle:nth-child(7) {
  animation: particle-animation-7 60s infinite;
  opacity: 0.12;
  height: 9px;
  width: 9px;
  animation-delay: -1.4s;
  transform: translate3d(76vw, 18vh, 46px);
  background: #264ad9;
}
@keyframes particle-animation-8 {
  100% {
    transform: translate3d(60vw, 83vh, 59px);
  }
}
.particle:nth-child(8) {
  animation: particle-animation-8 60s infinite;
  opacity: 0.22;
  height: 8px;
  width: 8px;
  animation-delay: -1.6s;
  transform: translate3d(10vw, 17vh, 60px);
  background: #5926d9;
}
@keyframes particle-animation-9 {
  100% {
    transform: translate3d(49vw, 15vh, 63px);
  }
}
.particle:nth-child(9) {
  animation: particle-animation-9 60s infinite;
  opacity: 0.15;
  height: 6px;
  width: 6px;
  animation-delay: -1.8s;
  transform: translate3d(87vw, 90vh, 54px);
  background: #26d947;
}
@keyframes particle-animation-10 {
  100% {
    transform: translate3d(71vw, 89vh, 51px);
  }
}
.particle:nth-child(10) {
  animation: particle-animation-10 60s infinite;
  opacity: 0.15;
  height: 8px;
  width: 8px;
  animation-delay: -2s;
  transform: translate3d(5vw, 7vh, 44px);
  background: #26bed9;
}
@keyframes particle-animation-11 {
  100% {
    transform: translate3d(85vw, 79vh, 46px);
  }
}
.particle:nth-child(11) {
  animation: particle-animation-11 60s infinite;
  opacity: 0.15;
  height: 10px;
  width: 10px;
  animation-delay: -2.2s;
  transform: translate3d(34vw, 89vh, 98px);
  background: #269dd9;
}
@keyframes particle-animation-12 {
  100% {
    transform: translate3d(70vw, 34vh, 53px);
  }
}
.particle:nth-child(12) {
  animation: particle-animation-12 60s infinite;
  opacity: 0.54;
  height: 8px;
  width: 8px;
  animation-delay: -2.4s;
  transform: translate3d(23vw, 5vh, 5px);
  background: #82d926;
}
@keyframes particle-animation-13 {
  100% {
    transform: translate3d(71vw, 44vh, 70px);
  }
}
.particle:nth-child(13) {
  animation: particle-animation-13 60s infinite;
  opacity: 0.35;
  height: 6px;
  width: 6px;
  animation-delay: -2.6s;
  transform: translate3d(78vw, 27vh, 9px);
  background: #d97126;
}
@keyframes particle-animation-14 {
  100% {
    transform: translate3d(77vw, 48vh, 60px);
  }
}
.particle:nth-child(14) {
  animation: particle-animation-14 60s infinite;
  opacity: 0.02;
  height: 9px;
  width: 9px;
  animation-delay: -2.8s;
  transform: translate3d(90vw, 90vh, 22px);
  background: #4426d9;
}
@keyframes particle-animation-15 {
  100% {
    transform: translate3d(9vw, 83vh, 9px);
  }
}
.particle:nth-child(15) {
  animation: particle-animation-15 60s infinite;
  opacity: 0.76;
  height: 8px;
  width: 8px;
  animation-delay: -3s;
  transform: translate3d(82vw, 14vh, 25px);
  background: #26d9d0;
}
@keyframes particle-animation-16 {
  100% {
    transform: translate3d(66vw, 25vh, 8px);
  }
}
.particle:nth-child(16) {
  animation: particle-animation-16 60s infinite;
  opacity: 0.33;
  height: 9px;
  width: 9px;
  animation-delay: -3.2s;
  transform: translate3d(18vw, 66vh, 72px);
  background: #a3d926;
}
@keyframes particle-animation-17 {
  100% {
    transform: translate3d(64vw, 73vh, 42px);
  }
}
.particle:nth-child(17) {
  animation: particle-animation-17 60s infinite;
  opacity: 0.31;
  height: 7px;
  width: 7px;
  animation-delay: -3.4s;
  transform: translate3d(77vw, 53vh, 17px);
  background: #d026d9;
}
@keyframes particle-animation-18 {
  100% {
    transform: translate3d(70vw, 19vh, 13px);
  }
}
.particle:nth-child(18) {
  animation: particle-animation-18 60s infinite;
  opacity: 0.76;
  height: 7px;
  width: 7px;
  animation-delay: -3.6s;
  transform: translate3d(65vw, 64vh, 61px);
  background: #26d932;
}
@keyframes particle-animation-19 {
  100% {
    transform: translate3d(64vw, 17vh, 75px);
  }
}
.particle:nth-child(19) {
  animation: particle-animation-19 60s infinite;
  opacity: 0.89;
  height: 10px;
  width: 10px;
  animation-delay: -3.8s;
  transform: translate3d(85vw, 44vh, 86px);
  background: #9a26d9;
}
@keyframes particle-animation-20 {
  100% {
    transform: translate3d(51vw, 52vh, 43px);
  }
}
.particle:nth-child(20) {
  animation: particle-animation-20 60s infinite;
  opacity: 0.61;
  height: 10px;
  width: 10px;
  animation-delay: -4s;
  transform: translate3d(53vw, 17vh, 18px);
  background: #8bd926;
}
@keyframes particle-animation-21 {
  100% {
    transform: translate3d(26vw, 77vh, 91px);
  }
}
.particle:nth-child(21) {
  animation: particle-animation-21 60s infinite;
  opacity: 0.36;
  height: 7px;
  width: 7px;
  animation-delay: -4.2s;
  transform: translate3d(69vw, 42vh, 15px);
  background: #ac26d9;
}
@keyframes particle-animation-22 {
  100% {
    transform: translate3d(11vw, 11vh, 66px);
  }
}
.particle:nth-child(22) {
  animation: particle-animation-22 60s infinite;
  opacity: 0.21;
  height: 9px;
  width: 9px;
  animation-delay: -4.4s;
  transform: translate3d(62vw, 29vh, 86px);
  background: #26c4d9;
}
@keyframes particle-animation-23 {
  100% {
    transform: translate3d(8vw, 4vh, 60px);
  }
}
.particle:nth-child(23) {
  animation: particle-animation-23 60s infinite;
  opacity: 0.41;
  height: 9px;
  width: 9px;
  animation-delay: -4.6s;
  transform: translate3d(22vw, 64vh, 61px);
  background: #32d926;
}
@keyframes particle-animation-24 {
  100% {
    transform: translate3d(79vw, 42vh, 7px);
  }
}
.particle:nth-child(24) {
  animation: particle-animation-24 60s infinite;
  opacity: 0.6;
  height: 9px;
  width: 9px;
  animation-delay: -4.8s;
  transform: translate3d(13vw, 74vh, 57px);
  background: #cdd926;
}
@keyframes particle-animation-25 {
  100% {
    transform: translate3d(6vw, 12vh, 14px);
  }
}
.particle:nth-child(25) {
  animation: particle-animation-25 60s infinite;
  opacity: 0.08;
  height: 6px;
  width: 6px;
  animation-delay: -5s;
  transform: translate3d(23vw, 6vh, 63px);
  background: #26d96e;
}
@keyframes particle-animation-26 {
  100% {
    transform: translate3d(86vw, 88vh, 23px);
  }
}
.particle:nth-child(26) {
  animation: particle-animation-26 60s infinite;
  opacity: 0.87;
  height: 9px;
  width: 9px;
  animation-delay: -5.2s;
  transform: translate3d(55vw, 72vh, 69px);
  background: #26d938;
}
@keyframes particle-animation-27 {
  100% {
    transform: translate3d(29vw, 52vh, 23px);
  }
}
.particle:nth-child(27) {
  animation: particle-animation-27 60s infinite;
  opacity: 0.86;
  height: 8px;
  width: 8px;
  animation-delay: -5.4s;
  transform: translate3d(11vw, 36vh, 20px);
  background: #264dd9;
}
@keyframes particle-animation-28 {
  100% {
    transform: translate3d(71vw, 49vh, 18px);
  }
}
.particle:nth-child(28) {
  animation: particle-animation-28 60s infinite;
  opacity: 0.41;
  height: 9px;
  width: 9px;
  animation-delay: -5.6s;
  transform: translate3d(76vw, 56vh, 62px);
  background: #cdd926;
}
@keyframes particle-animation-29 {
  100% {
    transform: translate3d(87vw, 9vh, 26px);
  }
}
.particle:nth-child(29) {
  animation: particle-animation-29 60s infinite;
  opacity: 0.04;
  height: 7px;
  width: 7px;
  animation-delay: -5.8s;
  transform: translate3d(75vw, 27vh, 8px);
  background: #26d971;
}
@keyframes particle-animation-30 {
  100% {
    transform: translate3d(77vw, 58vh, 63px);
  }
}
.particle:nth-child(30) {
  animation: particle-animation-30 60s infinite;
  opacity: 0.89;
  height: 6px;
  width: 6px;
  animation-delay: -6s;
  transform: translate3d(7vw, 44vh, 98px);
  background: #b2d926;
}

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat background dengan partikel yang bergerak. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here