为什么精灵背景动画不能正常工作?

问题描述 投票:0回答:1

我不知道如何进行正确的数学或公式来制作响应式 CSS 精灵。 它是一个边界半径为 50% 的圆。因此它的宽度和 padding-bottom 设置为 100% 以使圆成比例。

我的问题是让精灵匹配并步进(16 次)动画并响应地工作。我可以用 px 让它静态工作。

.hero_sprite_container {
  width: 100%;
}

.hero_sprite {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  background: green url('https://i.imgur.com/F1wpeSB.jpg') no-repeat 0 0;
  background-size: 100%;
  animation: sprite 10s steps(16) infinite;
}

@keyframes sprite {
  to {
    background-position: 0 100%;
  }
}
<div class="hero_image">
  <div class="hero_sprite_container">
    <div class="hero_sprite lazyload"></div>
  </div>
</div>

这是我的代码笔,您可以看到它。

https://codepen.io/gorelegacy/pen/ExxXZge

我的精灵 - https://i.imgur.com/F1wpeSB.jpg

html css background-image css-sprites
1个回答
4
投票

你已经快到了,你需要考虑

jump-none
来获得你想要的行为:

.hero_sprite {
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: green url('https://i.imgur.com/F1wpeSB.jpg') no-repeat 0 0;
  background-size: 100%;
  animation: sprite 10s steps(16,jump-none) infinite;
}

@keyframes sprite {
  to {
    background-position: 0 100%;
  }
}
<div class="hero_sprite"></div>

© www.soinside.com 2019 - 2024. All rights reserved.