Membuat Spin Ball Animation HTML CSS

Sharing Teknologi – Membuat Spin Ball Animation Effect HTML CSS Di WordPress. HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dasar 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 lainnya. Setiap tag memiliki peran tertentu, seperti <head> untuk informasi metadata dan <body> untuk konten utama. HTML memberikan kerangka kerja yang memungkinkan browser untuk memahami dan menampilkan informasi secara terstruktur.

CSS (Cascading Style Sheets) adalah bahasa gaya yang bekerja bersama HTML untuk mengatur tampilan dan presentasi halaman web. Dengan CSS, pengembang dapat mengontrol properti seperti warna, jenis font, tata letak, dan dekorasi elemen HTML. Pendekatan ini memisahkan antara struktur dan desain, memungkinkan perubahan gaya tanpa mempengaruhi struktur dasar. Selektor CSS memilih elemen yang akan diubah, sementara properti menentukan bagaimana perubahan tersebut diterapkan.

HTML dan CSS bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML memberikan dasar struktural, sementara CSS memberikan gaya dan tampilan. Bersama-sama, keduanya memungkinkan pembuat web untuk membuat halaman yang menarik, responsif, dan konsisten di berbagai perangkat.

Dengan evolusi HTML5 dan CSS3, pengembang dapat mengakses fitur-fitur baru yang meningkatkan kreativitas dan fungsionalitas, menjadikan kombinasi ini sebagai landasan utama dalam pengembangan web modern.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Spin Ball 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="spinball">
	<div class="ag-ball-block">
	  <div class="ag-format-container">
		<div class="ag-ball"></div>
	  </div>
	</div>
</div>
</div>

Style CSS

.spinball .ag-format-container {
  width: 1142px;
  margin: 0 auto;
  max-width:100%;
  
}

.spinball  {
  height: 100%;
}
.spinball .ag-ball-block {
  min-height: 500px;
  padding: 50px 0;
  background: url(https://teknologi.visitklaten.com/wp-content/uploads/2022/12/bg-1.jpg) no-repeat scroll 50% 0;
  background-size: cover;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  position: relative;
 }

.spinball .ag-ball {
  height: 159px;
  width: 159px;
  margin: 0 auto;
  background: url(https://teknologi.visitklaten.com/wp-content/uploads/2022/12/ball.png) no-repeat scroll 50% 50% #DDDCDE;

  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

  -webkit-animation: an-spin linear 1.45s infinite;
  -moz-animation: an-spin linear 1.45s infinite;
  -o-animation: an-spin linear 1.45s infinite;
  animation: an-spin linear 1.45s infinite;
}

@-webkit-keyframes an-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes an-spin {
  0% {
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes an-spin {
  0% {
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes an-spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media only screen and (max-width: 767px) {
 .spinball  .ag-format-container {
    width: 96%;
  }

}

@media (min-width: 768px) and (max-width: 979px) {
 .spinball  .ag-format-container {
    width: 750px;
  }

}

@media (min-width: 980px) and (max-width: 1161px) {
 .spinball  .ag-format-container {
    width: 960px;
  }

}

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.