✅ Как создать градиентную анимацию текста?
Сегодня разберем создание градиентного переливания текста. Данный эффект очень интересно смотреться на черном фоне, хотя если поменять градиентное переливание на другие цвета, можно будет добавлять и на белый фон. ⬇️
☑️ Так вот, для создания градиентной анимации, помогут свойства background: linear-gradient, background-size и background-clip: text. Но чтобы запустить анимацию, нужно добавить keyframes и правильно их настроить.
Делимся уже готовым HTML & CSS кодом ниже для создания прекрасной градиентной анимации: ⤵️
HTML ⤵️
Сегодня разберем создание градиентного переливания текста. Данный эффект очень интересно смотреться на черном фоне, хотя если поменять градиентное переливание на другие цвета, можно будет добавлять и на белый фон. ⬇️
☑️ Так вот, для создания градиентной анимации, помогут свойства background: linear-gradient, background-size и background-clip: text. Но чтобы запустить анимацию, нужно добавить keyframes и правильно их настроить.
Делимся уже готовым HTML & CSS кодом ниже для создания прекрасной градиентной анимации: ⤵️
HTML ⤵️
<h1 id="background">@code_ready</h1>CSS ⤵️
body {
background-color: black;
}
#background {
animation: gradient 10s linear infinite;
background: linear-gradient(to right, rgb(76, 217, 105), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83), rgb(255, 45, 83), rgb(88, 86, 217), rgb(52, 170, 220), rgb(76, 217, 105));
background-size: 400%;
-webkit-background-clip: text;
color: rgba(255, 255, 255, .1);
font-family: sans-serif;
font-size: 45px;
}
@keyframes gradient {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
#обучение #html #css