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

效果图