Membuat Slimeball Animation HTML CSS

Sharing Teknologi – Membuat Slimeball Animation Effect HTML CSS Di WordPress. HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dan mengorganisir konten sebuah halaman web.

Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, tautan, formulir, dan banyak lagi. Setiap tag memiliki peran spesifik, seperti <head> yang berisi informasi metadata dan <body> yang memuat konten utama. HTML memberikan kerangka dasar yang memungkinkan penampil web untuk memahami dan menampilkan informasi dengan benar.

CSS, atau Cascading Style Sheets, merupakan bahasa gaya yang berkolaborasi dengan HTML untuk mengontrol tampilan dan presentasi halaman web. Dengan CSS, pengembang dapat mengatur properti seperti warna, jenis font, ukuran, tata letak, dan dekorasi elemen HTML. Pendekatan ini memungkinkan pemisahan antara struktur dan desain, memudahkan perubahan gaya tanpa memengaruhi struktur dasar. Selektor CSS memilih elemen yang akan diubah, sedangkan properti menentukan bagaimana perubahan tersebut diterapkan.

HTML dan CSS bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML menyediakan struktur dan konten dasar, sementara CSS menangani presentasi. Kombinasi keduanya memungkinkan pembuat web untuk membuat halaman yang menarik, responsif, dan konsisten di berbagai perangkat.

Dengan terus berkembangnya teknologi web, HTML5 dan CSS3 membawa fitur-fitur baru yang memperluas kemampuan pengembangan web. HTML5 memperkenalkan elemen-elemen baru seperti <video> dan <audio>, sementara CSS3 membawa peningkatan dalam animasi, transisi, dan efek visual. Keduanya terus menjadi tulang punggung dalam pengembangan web modern, memungkinkan inovasi dan kreativitas yang tak terbatas dalam desain dan fungsionalitas halaman web.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Slimeball Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="slimeball">
	<div class="ball"></div>
	<div class="shadow"></div>
</div>
</div>

Style CSS

.slimeball {
  background-image: linear-gradient(
    to bottom left,
    #41a4f5,
    #6296c7,
    #838899,
    #a47a6b,
    #c56c3d,
    #e65e0f
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  overflow: hidden;
}

.slimeball .ball {
  animation: float 4.5s ease-in-out infinite;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;

  background: radial-gradient(
    circle at 75% 35%,
    white 5px,
    gray 8%,
    darkgreen 60%,
    green 100%
  );
  
  box-shadow: inset 0 0 20px #697, inset 10px 0 40px #9ca,
    inset 88px 0px 60px #597, inset -20px -60px 100px #8b9,
    inset 0 50px 140px #787, 0 0 90px #5a8;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-80px);
  }
  100% {
    transform: translatey(0px);
  }
}

.slimeball .shadow {
  background: #444;
  z-index: 1;
  width: 150px;
  height: 40px;
  top: 70%;
  animation: expand 4.5s ease-in-out infinite;
  position: absolute;
  border-radius: 50%;
}
@keyframes expand {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.5);
  }
}

@media only screen and (max-width: 500px) {
  .slimeball  .ball {
    animation: float 4.5s ease-in-out infinite;
    height: 120px;
    width: 120px;

    background: radial-gradient(
      circle at 65% 35%,
      white 5px,
      gray 15%,
      darkgreen 50%,
      green 100%
    );
    box-shadow: inset 0 -20px 30px #697, inset 40px 0 46px #9ca,
      inset 58px 0px 60px #597, inset -8px -30px 100px #8b9,
      inset 0 20px 110px #787, 0 0 90px #5a8;
  }
  .slimeball .shadow {
    width: 90px;
    height: 20px;
    top: 78%;
    animation: expand 4.5s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-40px);
    }
    100% {
      transform: translatey(0px);
    }
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.