奔跑的少年
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 256px; height: 256px; margin: 0 auto; background-image: url('./img/12/bg2.png'); animation: run 0.5s steps(6) infinite; } /* 创建关键帧 */ @keyframes run{ from{ background-position: 0 0; } to{ background-position: -1536px 0; } } </style> </head> <body> <div class="box1"></div> </body> </html>
图片:
学以致用,知行合一