Как называется или как сделать такой эффект?

Подскажите, как называется или как сделать такой эффект в тексте как здесь, а именно в шапке: «Представляем IRON BANK» или под ней — «IRON BANK — это уникальная престижная металлическая карта»?
  • Вопрос задан
  • 897 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Они используют CSS-градиенты и свойство backgrond-clip:
5d6fafa56ad05473523050.png
А перемещают эти градиенты нехитрой анимацией:
5d6fb22c255d7506444602.png
Также это можно делать на SVG-масках. Будет более кроссбраузерно.
Ну и на канвасе можно, по тому же принципу, что и с масками.
Ответ написан
@chernovairina
Стремлюсь к Frontend разработке
<h1 id="title">IRON BANK — это уникальная престижная металлическая карта</h1>


#title{
    font-size: 2em;
    background-image: linear-gradient(to right,#f7797d,#fbd786 25%,#c6ffdd 50%,#fbd786 75%,#f7797d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding: 0.3em 0.6em;
    animation: background 3s infinite alternate;
}

@-webkit-keyframes name-background {
    0% {
    background-position: 0 3200px;
    }
    10% {
    background-position: 3200px 0;
    }
   }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы