【CSS文字渐变动画】

CSS文字渐变动画

• HTML代码
• CSS代码
• 效果图

HTML代码

<div class="title">
  <h1>今天是春分</h1>
  <p>正是春天到来的日子，花都开了，小鸟也飞回来了，大山也绿了起来，空气也有点嫩嫩的气息了</p>
</div >

CSS代码

@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 gradient-change {
  to {
    --＠color-1: hsl(210 100% 59%);
    --＠color-2: hsl(310 100% 59%);
  }
}

.title {
  animation: gradient-change 2s linear infinite alternate;
  
  background: linear-gradient(
    to right in oklch, 
    var(--＠color-1), 
    var(--＠color-2)
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

效果图