带有CSS Sprite背景的响应圈

Question

我在知道如何进行正确的数学或公式制作响应式CSS精灵时遇到问题。其边界半径为50％的圆。因此，将其宽度和填充底部设置为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

Answer 1

问题与使用background-position和百分比值有关，使用16个步骤将无法获得预期的结果。相反，您可以使用伪元素作为背景层并考虑翻译：

.hero_sprite {
  width: 50%; 
  margin:auto;
  border-radius: 50%;
  overflow:hidden;
  position:relative;
  z-index:0;
}
/*To maintain the ratio*/
.hero_sprite:before {
   content:"";
   display:inline-block;
   padding-bottom: 100%;
}
/* the background layer */
.hero_sprite:after {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  height:1600%; /* N * 100% */
  background:url('https://i.imgur.com/F1wpeSB.jpg')top/100% 100%;
  animation: sprite 10s steps(16) infinite; /* Steps(N) */
}

@keyframes sprite {
  to {
    transform: translateY(-100%);
  }
}

<div class="hero_sprite lazyload"></div>

[在背景下，您要么需要使用像素值（不可缩放），就可以使用

.hero_sprite_container {
  width: 100%;
}

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

@keyframes sprite {
  to {
    background-position: 0 -3200px;
  }
}

<div class="hero_image">
  <div class="hero_sprite_container">
    <div class="hero_sprite lazyload"></div>
  </div>
</div>

或在步骤中定义15，但您会丢失一张图像：

.hero_sprite_container {
  width: 100%;
}

.hero_sprite {
  width: 50%;
  padding-top:50%;
  border-radius: 50%;
  background: green url('https://i.imgur.com/F1wpeSB.jpg') no-repeat 0 0;
  background-size: 100% auto;
  animation: sprite 10s steps(15) 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>

您可以通过在末尾添加一个空插槽，然后定义16个步骤来纠正以下问题。

有关了解steps的工作方式https://stackoverflow.com/a/51843473/8620333

您也可以手动定义其他位置，但这将很乏味：

.hero_sprite_container {
  width: 100%;
}

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

@keyframes sprite {
  0%     , 6.25%  {background-position: 0 calc(0*100%/15);}
  6.26%  , 12.5%  {background-position: 0 calc(1*100%/15);}
  12.51% , 18.75% {background-position: 0 calc(2*100%/15);}
  18.76% , 25%    {background-position: 0 calc(3*100%/15);}
  25.01% , 31.25% {background-position: 0 calc(4*100%/15);}
  31.26% , 37.5%  {background-position: 0 calc(5*100%/15);}
  37.51% , 43.75% {background-position: 0 calc(6*100%/15);}
  43.76% , 50%    {background-position: 0 calc(7*100%/15);}
  50.01% , 56.25% {background-position: 0 calc(8*100%/15);}
  56.26% , 62.5%  {background-position: 0 calc(9*100%/15);}
  62.51% , 68.75% {background-position: 0 calc(10*100%/15);}
  68.76% , 75%    {background-position: 0 calc(11*100%/15);}
  75.01% , 81.25% {background-position: 0 calc(12*100%/15);}
  81.26% , 87.5%  {background-position: 0 calc(13*100%/15);}
  87.51% , 93.75% {background-position: 0 calc(14*100%/15);}
  93.76% , 100%   {background-position: 0 calc(15*100%/15);}
}

<div class="hero_image">
  <div class="hero_sprite_container">
    <div class="hero_sprite lazyload"></div>
  </div>
</div>