Есть ли способ оживить цвет изображения слева направо? - PullRequest
Новая
       19

Есть ли способ оживить цвет изображения слева направо?

2 голосов
/ 11 июня 2019

Я пытаюсь анимировать значок загрузки, используя изображение. Я пытаюсь добиться того, чтобы изображение анимировалось между двумя цветами слева направо бесконечно. Это сделано в Angular 7. Я новичок в анимации, но, насколько я понимаю, я могу решить эту проблему с помощью CSS-анимаций.

То, что я хочу, похоже на пример ниже. Только я хочу, чтобы шкала серого исчезла справа, а вместо шкалы серого я хочу выбрать два разных цвета.

Вся помощь приветствуется! 

body {
  margin: 0;
}

.effect {
  position: relative;
}

.effect-dup {
  filter: grayscale(100%);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0;
  animation: width 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
  <div class='effect-dup'><img src="https://placeimg.com/640/480/nature" /></div>
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
  <div class='effect-dup'>
    <img src="https://placeimg.com/640/480/tech" />
  </div>
</div>

1 Ответ

4 голосов
/ 11 июня 2019

Можно рассмотреть дополнительный слой и mix-blend-mode. Просто отрегулируйте окраску и смешивание, чтобы получить нужный цвет. Вам больше не нужно дублировать изображение. 

body {
  margin: 0;
}

img {
  width: 200px;
  display: block;
}

.effect {
  position: relative;
  display: inline-block;
  overflow:hidden;
}

.effect:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: width 2s ease-in-out infinite;
  mix-blend-mode: color;
  background: linear-gradient(blue,red);
}

@keyframes width {
  from {
    transform:translateX(-100%);
  }
  to {
    transform:translateX(100%);
  }
}
<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
</div>
...