CSS Only: Pixel Bat Art & Floating Animation Murni CSS

Eksperimen CSS Only : Pixel Bat membuktikan kekuatan CSS murni dalam menggambar grafis pixel art tanpa gambar bitmap eksternal. Karakter kelelawar digambar menggunakan satu elemen HTML dengan koordinat bayangan berlapis (box-shadow).

Karakter kemudian dihidupkan dengan animasi melayang (floating/bobbing) yang disinkronkan menggunakan kurva transformasi vertikal dan rotasi sayap halus.

Trik Pixel Art dengan Single-Element Box-Shadow

Setiap piksel pada grid didefinisikan sebagai offset offset-x dan offset-y dalam properti box-shadow:

.pixel-bat {
  width: 4px;
  height: 4px;
  background: transparent;
  box-shadow:
    /* Kepala & Badan */
    4px 0 #1e1b4b, 8px 0 #1e1b4b,
    0 4px #1e1b4b, 4px 4px #ef4444, 8px 4px #ef4444, 12px 4px #1e1b4b,
    4px 8px #1e1b4b, 8px 8px #1e1b4b;
  animation: bat-hover 1.2s ease-in-out infinite alternate;
}

@keyframes bat-hover {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

Timestamp video

• 00:00 — Mulai tampilan visual Pixel Bat melayang

Format dan sumber

Short berdurasi 5 detik ini menyajikan showcase visual singkat tanpa pembagian bab. Penanda 00:00 mengarah langsung ke awal tampilan visual. Proyek sumber dapat diakses melalui Demo interaktif csskit dan repositori GitHub csskit-ab2rahman. Sumber video, diunggah 2026-08-07.