1

Увидел на этом сайте https://fatality.win/ анимацию логотипа, решил запилить такую же. Осмотрел source и сам код, но ничего связанного с этой анимацией так и не нашёл. Сам текст в HTML вбит обычным h1, пробовал скопировать всю часть сайта с этим текстом, но анимация не отобразилась, значит использовался JS/CSS, однако я так и не смог выяснить что именно и как. Помогите создать подобную анимацию, спасибо ♥Синяя и красная подложки циклично перемещаются

1 ответ 1

1

анимация там через css введите сюда описание изображения

@keyframes uk-text-shadow-glitch{0%{text-shadow:none}25%{text-shadow:-2px -2px 0 #eb055a,2px 2px 0 #4632f0}50%{text-shadow:2px -2px 0 #eb055a,-2px 2px 0 #4632f0}75%{text-shadow:-2px 2px 0 #eb055a,2px -2px 0 #4632f0}100%{text-shadow:2px 2px 0 #eb055a,-2px -2px 0 #4632f0}}

В консоли есть все

h1 {
  animation: uk-text-shadow-glitch .65s cubic-bezier(.25, .46, .45, .9399999999999999) both infinite;
}

@keyframes uk-text-shadow-glitch {
  0% {
    text-shadow: none
  }
  25% {
    text-shadow: -2px -2px 0 #eb055a, 2px 2px 0 #4632f0
  }
  50% {
    text-shadow: 2px -2px 0 #eb055a, -2px 2px 0 #4632f0
  }
  75% {
    text-shadow: -2px 2px 0 #eb055a, 2px -2px 0 #4632f0
  }
  100% {
    text-shadow: 2px 2px 0 #eb055a, -2px -2px 0 #4632f0
  }
}
<h1> text </h1>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.