<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ojo Parpadeante</title>
<style>
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.sprite {
width: 64px;
height: 64px;
background-image: url('ojo_parpadeante_sprite_sheet.png');
animation: blink 1.5s steps(3) infinite;
}
@keyframes blink {
from { background-position: 0 0; }
to { background-position: -192px 0; } /* 64px * 3 frames */
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>