gpt4 book ai didi

CSS Spritesheet 动画一直向左移动

转载 作者:太空宇宙 更新时间:2023-11-03 22:59:35 25 4
gpt4 key购买 nike

我有一个 spritesheet (9170px x 350px),其中包含 70 帧单个字符。这是我的代码。

@-webkit-keyframes play {
100% {
background-position: -9170px;
}
}
@keyframes play {
100% {
background-position: -9170px;
}
}
.character-one {
width: 131px;
height: 350px;
border: 1px solid #ddd;
margin-left: 20px;
background: url('http://i.imgur.com/gK3C2VZ.png') left center;
-webkit-animation: play 2s steps(70) infinite;
animation: play 2s steps(70) infinite;
}
<div class="character-one"></div>

当我在浏览器中打开它时,我看到 Angular 色开始动画化,但 spritesheet 在 div 中从右向左移动。可能是什么原因?我认为这通常发生在 steps() 少于帧数时,但在我的情况下似乎一切正常。会不会是帧间距不均匀?

这是 JSFiddle 的链接

最佳答案

虽然您的实际 sprite-sheet 是 9170px 宽,但其中的各个 sprite 实际上在两边都有边距。这就是造成滑动效果的原因。

根据您的代码,有 70 步,背景移动 9170 像素(每步 131 像素)。但是每个 131px 的 Sprite 似乎并不完全重叠。在下图中,我们可以看到 spritesheet 的前 131px 和最后 131px 的样子(添加背景只是为了视觉区分)。

enter image description here

像下面的代码片段一样更改 background-position 似乎会产生更好的输出。

@-webkit-keyframes play {
100% {
background-position: -9144px;
}
}

@keyframes play {
100% {
background-position: -9144px;
}
}

.character-one {
width: 131px;
height: 350px;
border: 1px solid #ddd;
margin-left: 20px;
background: url('http://i.imgur.com/gK3C2VZ.png');
background-position: -28px center;
-webkit-animation: play 2s steps(70) infinite;
animation: play 2s steps(70) infinite;
}
<div class="character-one"></div>


在下面的 sprite-sheet 中,我们可以看到每个 sprite 图像的所有边的间距是如何相等的。它取自 Tree House blog on CSS Sprite Sheet Animations .

enter image description here

关于CSS Spritesheet 动画一直向左移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37043279/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com