Membuat Swing Ball Animation HTML CSS

Sharing Teknologi – Membuat Swing 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 dalam menyusun hierarki konten pada sebuah halaman web. Contoh, tag <head> berisi informasi metadata, sementara tag <body> memuat konten utama.

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 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 memberikan dasar struktural, sementara CSS memberikan gaya dan tampilan. Keduanya bekerja bersinergi, 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 Swing 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="swingball py-4">
	<div class="container">
	  <div class="arc">
		<div class="ball"></div>
	  </div>
	</div>
</div>
</div>

Style CSS

:root {
  --size: 300px;
  --borderS: calc(var(--size) / 10);
  --ballSize: calc(var(--size) / 5);
  --rightCorrected: calc(var(--size) / 13.33);
}

.swingball {
  min-height: 600px;
  background-color: #181818;
}

.swingball .container {
  position: relative;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
}

.swingball .arc {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--borderS) solid transparent;
  border-bottom-color: #f00;
  border-right-color: #00f;
  transform: rotate(45deg);
  animation: spin 4s ease-in-out infinite;
  text-align: center;
  margin: 0 auto;
}

@keyframes spin {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
}

.swingball .ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: spinBall 4s ease-in-out infinite;
}

@keyframes spinBall {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
}

.swingball .ball::before {
  content: "";
  position: absolute;
  bottom: 50%;
  right: var(--rightCorrected);
  width: var(--ballSize);
  height: var(--ballSize);
  transform: translateY(-50%);
  background: lightgray;
  box-shadow: -2px -2px 4px 4px rgba(0, 0, 0, 0.75),
    inset 6px 4px 10px 2px black;
  border-radius: 50%;
}

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.