1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Step</title> <style> @-webkit-keyframes step { 0% { background-position:0px -0%; } 100% { background-position:0px -400%; } } @keyframes step { 0% { background-position:0px -0%; } 100% { background-position:0px -400%; } } div { height:35px; width:32px; -webkit-animation:step 300ms steps(4) infinite; /* infinite为无限次 */ animation:step 300ms steps(4) infinite; /* steps( 4 ) 分4步执行 */ background:url( tsj.png ); } </style> </head> <body> <div></div> </body> </html> |
测试连接 参考: http://www.gb […]