我不知道如何进行正确的数学或公式来制作响应式 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>
这是我的代码笔,您可以看到它。
你已经快到了,你需要考虑
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>