通过精灵图片序列单元制作Html+CSS3 动画

方法一:精灵图片已经被切割好(假设为: p01.png,p02.png,...,p09.png), 可以这些做:

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片序列动画演示-1title>
<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% {
 visi: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下载地址:

点击>>

你可能感兴趣的:(通过精灵图片序列单元制作Html+CSS3 动画)