本文主要是介绍css3精灵动画,逐帧自适应精灵图+css3实现小动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个是固定像素的逐帧精灵图：
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Title.flashImage{
width: 200px;
height: 312px;
background-image: url("img/walkingdead.png");
-webkit-animation: play 2s steps(10) infinite;
-o-animation: play 2s steps(10) infinite;
animation: play 2s steps(10) infinite;
}
@keyframes play {
from{
background-position: 0;
}
to{
background-position: -2000px;
}
}
自适应任意尺寸的精灵图：
css3雪碧图任意缩放.boxA {
width: 200px; /*宽高尺寸任意增减*/
height: 312px;
background:url("walkingdead.png") no-repeat;
background-size: 1000% 100%; /*这项是关键，用来撑开拼凑起来的序列帧，一行10帧图就是1000%*/
-webkit-animation: bird-slow .5s steps(3) infinite; /*发生了3次位移steps就是3*/
animation: bird-slow .5s steps(3) infinite;
}
@keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%; /*整张图是100%，9次位移每一次是11%，第9次就是99%*/
}
}
@-webkit-keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}
walkingdead.png
这篇关于css3精灵动画,逐帧自适应精灵图+css3实现小动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
