Анимировать фоновое изображение в оверлее - PullRequest
Новая
       11

Анимировать фоновое изображение в оверлее

0 голосов
/ 02 мая 2018

Я последовал за другим ответом stackoverflow, чтобы создать загрузочный оверлей на моей веб-странице. У меня есть класс оверлея как: 

.overlay {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 )
              url('../images/loaderIcon.png')
              50% 50%
              no-repeat;
}

У меня также есть класс CSS, который анимирует все, к чему он привязан, для вращения: 

.spinning {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

Теперь, в ответе stackoverflow, они использовали файл .gif из imgur. Я создал свой собственный образ, который хочу использовать, и я хотел оживить его, чтобы он вращался. Очевидно, что простое присоединение этого класса к классу оверлеев приводит к вращению всего оверлея (что, по общему признанию, смешно). Есть ли способ просто изолировать фоновый источник URL для вращения? Есть ли простой способ для меня, чтобы преобразовать его в GIF и анимировать его с помощью другой программы? (MacOS)

...