【CSS文字渐变动画】

原创已于 2025-03-20 10:01:05 修改 · 957 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-03-20 09:53:19 首次发布

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;
}