最近用DeepSeek问了一下如何使用css设置文字的渐变色效果,并且希望可以有动画效果,然而DeepSeek给出的答案动画效果有些bug,于是自己动手改了改。
下面是CSS样式设置代码
.gradient-text {background-image: linear-gradient(to right, #ff6b6b, #ffde59, #4ecdc4, #ff6b6b);/* 动画效果必须设置此属性,不要动画的话可以删除 */background-size: 200% auto;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: inline-block;font-size: 3rem;font-weight: bold;/* 动画效果 不需要的话可以删除 */animation: gradientFlow 4s linear infinite;
}@keyframes gradientFlow {0% {background-position: 0% 100%;}100% {background-position: 200% 100%;}
}