方法一:精灵图片已经被切割好(假设为: p01.png,p02.png,...,p09.png), 可以这些做:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片序列动画演示-1</title> <style type="text/css"> @keyframes myani { 0% { background-color:#FFF; } 10% { background: url(s1/p01.png); } 20% { background: url(s1/p02.png); } 30% { background: url(s1/p03.png); } 40% { background: url(s1/p04.png); } 50% { background: url(s1/p05.png); } 60% { background: url(s1/p06.png); } 70% { background: url(s1/p07.png); } 90% { background: url(s1/p08.png); } 90% {
background: url(s1/p09.png); } 100% { background: url(s1/p09.png); } } div { width: 128px; height: 128px; animation-name: myani; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count:10; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
方法二:精灵图片(比如:Spring.png),一般不需要切割,但需要对于每个序列单元的位置需要坐标定位(下方Spring.png里面有64个序列单元,采集了16个序列单元作为测试),可以这样做:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>精灵图片序列动画演示</title> <style type="text/css"> @keyframes myani { 0%{ background-color:#FFF; display:block; } 5% { background-position:0 -256px; } 10% { background-position:-128px -256px; } 15% { background-position:-256px -256px; } 20% { background-position:-384px -256px; } 25% { background-position:-512px -256px; } 30% { background-position:-640px -256px; } 35% { background-position:-768px -256px; } 40% { background-position:-896px -256px; } 50% { background-position:0 -384px; } 55% { background-position:-128px -384px; } 60% { background-position:-256px -384px; } 65% { background-position:-384px -384px; } 70% { background-position:-512px -384px; } 75% { background-position:-640px -384px; } 80% { background-position:-768px -384px; } 90% { background-position:-896px -384px; } 100% {visibility: hidden; } } div { width: 128px; height: 128px; background:url(springImg/spring.png); background-position:0 -256px; animation:myani 1s steps(1, start); animation-iteration-count:10; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
Spring.png下载地址:
课后作业:
1.复制上述代码,预览查看效果。
2.读懂上述代码。