当您选择的图像 Sprite 不包含一行图像时,如何为所有图像 Sprite 设置动画?
**这个例子有一个单行图像**
链接:Reference
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>
现在这个例子包含了不是一行的 Sprite 图像。但包含 3 行 Sprite 图像。你如何像上面代码片段的链接那样制作动画?我是否使用 jquery/javascript 来显示它?请帮忙。
img {display: block;margin: auto;}
.sample {
margin: 0 auto;
width: 75px;
height: 100px;
background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
animation: play 1s steps(4) infinite;
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -299px; }
}
<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />
<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>
最佳答案
创建了两个独立的关键帧动画,水平遍历 4 帧,垂直遍历 3 帧。当一个方向动画在播放时,另一个必须被卡住。
由于1s设置为经过4个水平帧,所以下一个垂直帧将在1s后开始,因此垂直方向的持续时间等于1s x 3个垂直帧。
img {
display: block;
margin: auto;
}
.sample {
margin: 0 auto;
width: 75px;
height: 100px;
background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite;
}
@keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: -301px; }
}
@keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: -299px; }
}
<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />
<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>
关于jquery - 如何为所有 Sprite 图像制作动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43316609/