Question

我正在尝试为学校项目制作一些角色，但我遇到了问题。因为我对这个世界全新，所以我正在寻找一些指导，我希望这将是正确的地方。

我的第一个问题：

我在插画家中为我的一个角色制作了一张精灵表。 http://gryfaberbay.dk/kea/forhelp/spritesheet.png（我已经将它变成了一个png文件，所以你们可以看到）当我试图通过使用我的精灵表格让我的角色动画并从上面的精灵表演中走出来。

这是我的代码：

#princess_sprite {
background-image: url(img/spritesheet_prinsesse.svg);
width: 18vw;
height: 45vw;
background-size: 300%;
/* - mod venstre. */
}

.princess_walkcycle {
animation-name: princess_walkcycle_kf;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps(3);

}

@keyframes princess_walkcycle_kf {
0% {
    background-position: 0%;
}
100% {
    background-position: -300%;
}
}

#princess_container {
position: absolute;
top: 8%;
left: 50%;
}

.princess_move_left {
animation-name: princess_move_left_kf;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
/*animation-timing-function: ease;*/
}

@keyframes princess_move_left_kf {
0% {
    left: 100%;
}
100% {
    left: 71.31%;
}
}

我希望你们愿意帮助我！非常感谢:)。

此致 GRY

Answer 1

您需要结合height属性调整width的{{1}}和#princess_sprite。

以下是您的代码的简化版本：

＆＃13;

background-size

＆＃13;

#princess_sprite {
  width: 100px;
  height: 200px;
  background-image: url(http://gryfaberbay.dk/kea/forhelp/spritesheet.png);
  background-size: 300%;
  animation-name: princess_walkcycle_kf;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes princess_walkcycle_kf {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: -300%;
  }
}

＆＃13;

动画精灵表

1 个答案: