使用CSS Sprite背景制作响应式圆形

Question

我在制作响应式css sprite时遇到了问题，不知道如何进行正确的数学计算或公式。 这是一个带有圆角边框的圆形。因此，宽度和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>

这是我的 CodePen 链接，你可以查看它。

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

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

- Adam G

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://dev59.com/5K3la4cB1Zd3GeqPP6O3#51843473 您也可以手动定义不同的位置，但这将是繁琐的。

.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>

- Temani Afif

---

谢谢你的帮助！做得很好。 我在网上找不到很多类似的例子，所以非常感激。 - Adam G