e媒网络

一切皆可能 e媒网络 http://www.eMay.net
博客园 首页 新随笔 联系 订阅 管理
通过精灵图片序列单元制作Html+CSS3 动画

方法一:精灵图片已经被切割好(假设为: 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.读懂上述代码。

posted on 2020-02-06 20:52  e媒网络技术团队  阅读(690)  评论(0)  编辑  收藏  举报