» » Анимированный градиентный текст

Анимированный градиентный текст

Предлагаю в сегодняшней статье посмотреть как можно оформить необычно текст градиентом. Градиент сам по себе довольно красивое декорирование. Но сегодняшняя статья о том, как сделать анимированный градиентный текст. 
Градиент может быть линейным и радиальным.
Линейный градиент linear-gradient. Создаваться может с помощью двух и более цветов, идущих в разных, заданных направлениях: вниз/вверх/влево/вправо/по диагонали.
Радиальный градиент radial-gradient. Цвета выходят из центра градиента и распределяются наружу, создавая форму круга или эллипса.
Повтор градиента: repeating-linear-gradient и repeating-radial-gradient. Используя повторение любого вида градиента, можно создавать разнообразные узоры - паттерны. Полоски, горошек, зигзаги, ромбы и более сложные узоры способен сделать обычный градиент.
паттерны
Градиентом можно оформлять - кнопки, рамки, текст, фон и многое другое. 
Градиент поддерживает прозрачность. Его можно наслаивать друг на друга. 
В оформлении сайтов без градиента обойтись сложно. 
Предложенными, в сегодняшней статье кодами, можно оформить заголовки, обычный текс, цитаты и т.д.
Так же о градиенте читайте в статьях:
В предложенных кодах можно менять h2 на другие теги:
<p>Обычный текст</p>
<title>Название</title>
<h1>Заголовок 1</h1>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Проверить работу всех кодов можно в редакторе. Вставляем скопированный код в первое окно, нажимаем кнопку "Показать результат".

Вариант 1

Вариант 1
<h2>Ваш текст</h2>
<style>
h2 {
animation: move 4s linear infinite;
background-image: linear-gradient(to right, #77f, #33d0ff, #25ffbb, #33d0ff, #77f);
background-size: 200% auto;
        text-align: center;
font: 700 70px/1 Arial;
letter-spacing: 1px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes move { to { background-position: 200% center; } }</style>
Цвет градиента можно менять - выделила красным.
Шрифт, его толщина и размер - синим.

Вариант 2

Вариант 2
Вариант 2
Код:
<p class="text">Ваш градиентный текст</p>
<style>
.text{
 font: normal bold 3.5rem 'Arial', sans-serif;
  text-align: center; 
  text-transform: uppercase; 
  background-image: linear-gradient(to right, #00F260, #f79d00, #0575E6, #64f38c);
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
  background-size: 300%;
  background-position: -100%;  
  animation: animatedText 5s infinite alternate-reverse;
}
@keyframes animatedText{
  to{
    background-position: 100%; 
  }
}</style>
Меняем шрифт, его толщину, размер - в коде выделила красным цветом.
Оранжевым цветом - цвет градиента.

Вариант 3

Код:
Вариант 3
<p class="text">Ваш градиентный текст</p>
<style>
.text {
  background: linear-gradient(to top, #F5F5F5 20%, #607D8B 50%, #F5F5F5 80%);
  background-size: 200% auto;
  font: normal bold 3.5rem 'Arial', sans-serif;
  text-align: center; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: center 2.5em;
  animation: shine 3s linear infinite;
}
@keyframes shine {
  to {
    background-position: center 100%;
  }
}
</style>
Шрифт, его размер в коде выделила красным. Цвета градиента - зелёным.

Вариант 4

бегающий градиент
градиент 2
<h2 class="linear-wipe">Ваш градиентный текст</h2>
<style>
h2 {
  font-size: 5vw;
  font-family: sans-serif;
}
.linear-wipe {
  text-align: center;
  background: linear-gradient(to right, purple 95%, cyan, purple);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite alternate;
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
</style>
Красным в коде отмечен бегающий градиент.
Зелёным - цвет букв.
Синим - размер шрифта.

Ваши комментарии:

Комментарии со спамом удаляются.