Задать вопрос

Как сделать такую анимацию?

Как сделать такую же анимацию?

Как здесь

Только не с картинками как на сайте выше, а обычным текстом с задним фоном
fb713883b9a14628928aca296a4873bc.png
  • Вопрос задан
  • 315 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
Чистый CSS
codepen.io/STutukov/pen/gmgZdW?editors=1100

UPD:
также можно сделать через:
1. svg
2. mix-blend-mode
3. codepen.io/hendrysadrak/pen/VLMOMJ - что-то типо этого
4. shpargalkablog.ru/2013/11/gradient-text.html
5. И т.д.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Почему там сделано картинками, а не текстом?
Ответ написан
Комментировать
alvvi
@alvvi
export default apathy;
А какая, собственно говоря, разница картинками оно или текстом?

Насколько я вижу это просто анимированный div с заданными фиксированными размерами, сверху на него вы можете хоть инлайн svg поместить, разницы не будет.

Если интересует сама анимация, то она есть в source-файлах этого же сайта
.loader__logo--white {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url(/img/global/omnam_logo-white.png);
  -webkit-animation-name: loading;
  animation-name: loading;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: playing;
  animation-play-state: playing;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@keyframes loading {
  0% {
    width: 0%;
    opacity: 1;
  }
  60% {
    width: 100%;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


Если заменить свойство
background-image: url(/img/global/omnam_logo-white.png);

на
background-color: #fff;

то все будет по-прежнему работать.
Ответ написан
Комментировать
@arthan1011
Вдруг поможет:
codepen.io/arthan/pen/KWaezE
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы