Отзывчивый круг с фоном CSS Sprite - PullRequest
Новая
       53

Отзывчивый круг с фоном CSS Sprite

3 голосов
/ 26 октября 2019

У меня проблемы со знанием того, как сделать правильную математику или формулу, чтобы создать отзывчивый спрайт 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

1 Ответ

3 голосов
/ 26 октября 2019

Проблема связана с использованием 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>
...