<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sprite Demo</title> <style> #an { width: 128px; height: 128px; background: url(img/spriteB.png); animation: move infinite 4s steps(8,end); } /* -254，-384 x-1152 1024-128= 896 */ @keyframes move { 0% { background-position:0 -256px; } 50% { background-position:-1024px -256px; } 50.001% { background-position:0 -384px; } 100% { background-position:-1024px -384px; } } </style> </head> <body> <div id="an"></div> </body> </html>
SpriteB图片下载:
