Logical Python

Logical Python
Random News

Bat Pixel Art

logical03 mins

index.html

Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Bat Pixel Art</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div class="bat"></div>
</body>
</html>

Explanation:

  • <!DOCTYPE html> — declares HTML5 and ensures the browser uses standards mode. index
  • <link rel="stylesheet" href="./style.css" /> — connects the large CSS sprite/animation (all the bat pixel-art) to this page. Without this the page would be blank. index
  • <div class="bat"></div> — the single DOM element the CSS uses as a 1px “pixel” canvas; all the bat pixels are produced with box-shadow on this element. The markup is intentionally minimal because the art is entirely in CSS.

style.css

Copy Code
html, body { height: 100%; }
body { display: flex; align-items: center; justify-content: center; }

Explanation: sets the page to full height and uses flexbox to center the bat in the viewport. This keeps the art centered regardless of screen size.

2) The .bat “pixel” element

Copy Code
.bat {
  width: 1px;
  height: 1px;
  transform: scale(4);
  position: relative;
  left: -128px;
  top: -128px;
  animation: 0.4s bat steps(1) infinite;
}

Explanation:

  • width: 1px; height: 1px; — the element acts as a single pixel.
  • transform: scale(4); — scales that pixel up so the drawing is easily visible (acts like nearest-neighbour enlargement).
  • left / top offset the single pixel so the many box-shadow coordinates align on-screen.
  • animation: 0.4s bat steps(1) infinite; — runs the @keyframes bat animation (the frames are defined by different box-shadow sets).

Download Code

Related Post