CSS文字渐变动画
HTML代码
html
复制代码
<div class="title">
<h1>今天是春分</h1>
<p>正是春天到来的日子，花都开了，小鸟也飞回来了，大山也绿了起来，空气也有点嫩嫩的气息了</p>
</div >
CSS代码
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;
}
效果图
