Как сделать анимированный текст как в Cyberpunk2077?

Question

Мне надо использовать svg или что? Или что-то на подобие этого Буду очень благодарен

Answer 1

Верно @andreymal в комментарии заметил, что:

Для школьного проекта это запредельно сложная анимация, требующая тонны моделей, ключевых кадров, шейдеров и фильтров

Для достижения такого эффекта нужны совсем другие технологии, например WebGL. С помощью одного только CSS точно такого эффекта добиться нельзя, это однозначно. Ну максимум только если чего-то отдаленно похожего, с чем придется немало повозиться, было бы желание. Но учитывая, что это всего лишь школьный проект, я вот этого делать точно не буду (может быть вам специалист по WebGL @Stranger in the Q что-то сообразит, если хорошо попросить), поэтому предлагаю просто быстренько сфилонить (мне кажется, это у вас хорошо получится, содержание вашего вопроса подвело меня к такому мнению). Ну например так, работа-пятиминутка:

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
body {
  background-color: black;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: black;
}

#container h1 {
  font-size: 7.5em;
  color: rgba(184, 134, 11, 1);
  font-family: 'ZCOOL KuaiLe', cursive;
  animation-name: text;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes text {
  1% {
    color: #C71585;
    font-size: 7em;
    filter: drop-shadow(0em 0em 0.05em #6495ED);
  }
  5% {
    color: black;
    filter: drop-shadow(0em -0.1em 0.05em #6495ED);
  }
  7% {
    color: #FFFF00;
    filter: drop-shadow(-0.1em -0.1em 0.05em #6495ED);
  }
  9% {
    color: black;
    filter: drop-shadow(0.1em 0.1em 0.05em #6495ED);
  }
  11% {
    color: #6495ED;
    filter: drop-shadow(0.1em 0em 0.05em #6495ED);
  }
  13% {
    color: #C71585;
    filter: drop-shadow(-0.1em 0em 0.05em #6495ED);
  }
  15% {
    color: #6495ED;
    filter: drop-shadow(0em -0.1em 0.05em #6495ED);
  }
  17% {
    color: black;
    filter: drop-shadow(0.1em 0.1em 0.05em #6495ED);
  }
  19% {
    color: rgba(184, 134, 11, 1);
    filter: drop-shadow(0em 0em 0.05em #6495ED);
  }
  21% {
    font-size: 7em;
  }
  23% {
    color: rgba(184, 134, 11, 1);
    font-size: 7.5em;
  }
  25% {
    filter: drop-shadow(0.02em -0.02em 0.01em rgba(100, 149, 237, 1));
  }
  100% {
    color: rgba(184, 134, 11, 1);
    font-size: 7.5em;
    filter: drop-shadow(0.02em -0.02em 0.01em rgba(100, 149, 237, 1));
  }
}

<div id="container">
  <h1>Cyberpunk</h1>
</div>

БЛОГ НА HUSL

Как сделать анимированный текст как в Cyberpunk2077?

Ответы (1 шт):