具有 CSS 雪碧背景的响应圆圈

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 的工作原理相关

您也可以手动定义不同的位置，但会很乏味：

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

具有 CSS 雪碧背景的响应圆圈

Responsive Circle with CSS Sprite background

html

css

background-image

css-sprites