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

Хотите, чтобы ваш текст ожил? Анимированный градиентный текст — это отличный способ придать вашему сайту стильный, современный и динамичный вид.
Благодаря мощи CSS вы можете легко создать впечатляющий эффект, который привлекает внимание пользователей и делает ваш контент незабываемым.
See the Pen Animated CSS Gradient Text by Adam Argyle (@argyleink) on CodePen.
HTML
<article>
<h1>Animated Gradient Text</h1>
<p>@property + linear-gradient() + background-clip + text-fill-color</p>
</article>
CSS
/*these type the CSS variable as colorunlocking the ability for the browserto animate just that portion*/@property --color-1 {syntax: "<color>";inherits: false;initial-value: hsl(98 100% 62%);}@property --color-2 {syntax: "<color>";inherits: false;initial-value: hsl(204 100% 59%);}/* keyframes that change the color variable */@-webkit-keyframes gradient-change {to {--color-1: hsl(210 100% 59%);--color-2: hsl(310 100% 59%);}}@keyframes gradient-change {to {--color-1: hsl(210 100% 59%);--color-2: hsl(310 100% 59%);}}article {/* apply variable changes over time */-webkit-animation: gradient-change 2s linear infinite alternate;animation: gradient-change 2s linear infinite alternate;background: linear-gradient(/*in oklch produces more vibrant gradient results*/to right in oklch,/* use the variables in a gradient (or wherever!) */var(--color-1),var(--color-2));/* old browser support */-webkit-background-clip: text;-webkit-text-fill-color: transparent;/* modern browser version */background-clip: text;color: transparent;}@layer demo.support {h1 {font-size: 10vmin;line-height: 1.1;}body {background: hsl(204 100% 5%);min-block-size: 100%;box-sizing: border-box;display: grid;place-content: center;font-family: system-ui, sans-serif;font-size: min(200%, 4vmin);padding: 5vmin;}h1, p, body {margin: 0;text-wrap: balance;}h1 {line-height: 1.25cap;}p {font-family: "Dank Mono", ui-monospace, monospace;}html {block-size: 100%;}article {display: grid;gap: 1lh;text-align: center;}}
animated-css-gradient-text.zip
0
6.55 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!