<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Running Man Animation</title>
<style>
body {
font-family: sans-serif;
background-color: #e0f7fa; /* Light sky blue */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
h1 {
color: #004d40; /* Dark teal */
margin-bottom: 20px;
}
.scene {
position: relative; /* Establishes a positioning context */
width: 90%; /* Responsive width */
max-width: 700px; /* Max width */
height: 300px; /* Scene height */
border: 2px solid #a5d6a7; /* Light green border */
overflow: hidden; /* IMPORTANT: Hides anything outside boundaries */
background-color: #c8e6c9; /* Light green grass */
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 5px;
}
.road {
position: absolute; /* Position relative to the scene */
bottom: 0;
left: 0;
width: 100%;
height: 100px; /* Height of the road */
background-color: #616161; /* Grey road color */
border-top: 6px dashed #eeeeee; /* Dashed center line */
box-sizing: border-box; /* Include border in height */
}
.man {
position: absolute; /* Position relative to the scene */
bottom: 60px; /* Position him slightly above the road bottom (road height – ~man height/2 + buffer) */
left: 50%; /* Center him horizontally */
transform: translateX(-50%); /* Fine-tune centering */
/* — === Sprite Sheet Configuration === — */
/* — These values MUST match the embedded sprite below — */
width: 80px; /* — WIDTH of ONE frame — */
height: 100px; /* — HEIGHT of ONE frame — */
background-repeat: no-repeat;
/* — Embedded Sprite Sheet (Base64 Encoded PNG) — */
/* This is an 8-frame (80×100 each) simple running man */
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABkCAYAAABcy+cDAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wMUDyoQL6r9SwAAA7xJREFUeNrt3EFuFEEUQNG94AgMgQkJgYEtIYEtIRBgYAsDIyAyAhISMgISMjAwAjIyMDACIyMDgyNksxVv1etVdTdVfR/plJRUpmpVnftXb/fcd09VdWRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGTUjKNHfPEA/Ldvf/y89vx7j4+f/f+3v//y+7e//u1n49P/DwDX+PFt+vOr/+Pn+vMPUP/8/v3rAfzF95/+/ufx7z+Aff0/AgBz/xqADwDA+AHA+AEBAAAAAElFTkSuQmCC’);
/* You would replace the above ‘url(…)’ value if using your own sprite */
/* — === Animation Definition === — */
/* Adjust duration (0.6s) for speed */
/* Adjust steps(8) to match the number of frames in YOUR sprite */
animation: run-cycle 0.6s steps(8) infinite;
}
/* Keyframes define the animation steps */
@keyframes run-cycle {
from {
background-position: 0px 0px; /* Start at the first frame (left edge) */
}
to {
/* Move the background leftwards by the total width of all frames */
/* Total width = frame_width * number_of_frames */
/* In this example: 80px * 8 = 640px */
background-position: -640px 0px;
}
}
</style>
</head>
<body>
<h1>CSS Sprite Animation</h1>
<div class=”scene”>
<div class=”road”></div>
<div class=”man”></div>
</div>
<p style=”margin-top: 20px; font-size: 0.9em; color: #555;”>
Animation uses a CSS sprite sheet embedded as a Data URI.
</p>
</body>
</html>
