Pixel Animation Lab

純本地生成 · Python 骨架運動學 → sprite sheet → 網頁零依賴播放

16 FRAMES · STEPS() · PIXELATED

🟢 SLIME HOP

12.5 fps

🦴 SKELETON WALKER

12.5 fps

🐕 DOG TROT

12.5 fps

🤖 ROBOT WALK

12.5 fps

⚔️ ARMORED KNIGHT

12.5 fps
⚙️ 點樣嵌入你自己嘅網頁/遊戲?

網頁(純 CSS,零 JS):

.sprite {
  width: 192px; aspect-ratio: 1;           /* 48px 邏輯 × 4 */
  image-rendering: pixelated;
  background: url("walker_sheet@8x.png") 0 0 / 3072px 100% no-repeat;
  animation: play 1.28s steps(16) infinite;
}
@keyframes play { to { background-position-x: -3072px } }

遊戲引擎:匯入 *_sheet.png(透明 RGBA),每格 48×48(walker)/32×32(slime),16 格,12.5 fps。