【CSS文字渐变动画】

HTML代码

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

复制代码

CSS代码

2. @property --＠color-1 {
3.   syntax: "<color>";
4.   inherits: false;
5.   initial-value: hsl(98 100% 62%);
6. }
8. @property --＠color-2 {
9.   syntax: "<color>";
10.   inherits: false;
11.   initial-value: hsl(204 100% 59%);
12. }
14. @keyframes gradient-change {
15.   to {
16.     --＠color-1: hsl(210 100% 59%);
17.     --＠color-2: hsl(310 100% 59%);
18.   }
19. }
21. .title {
22.   animation: gradient-change 2s linear infinite alternate;
23.   
24.   background: linear-gradient(
25.     to right in oklch,
26.     var(--＠color-1),
27.     var(--＠color-2)
28.   );
29.   
30.   -webkit-background-clip: text;
31.   -webkit-text-fill-color: transparent;
32.   background-clip: text;
33.   color: transparent;
34. }

复制代码

效果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。