SM - Стильные решения для вашего сайта

Как создать анимированный градиентный текст с CSS: Пошаговый пример

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

Живая магия текста: Анимированный градиент с 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 color
  unlocking the ability for the browser 
  to 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
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 1 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU