CSS设置文字渐变色样式（附带动画效果）

最新推荐文章于 2025-03-10 10:16:53 发布

夏日米米茶

最新推荐文章于 2025-03-10 10:16:53 发布

阅读量287

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/xjtarzan/article/details/146018743

版权

最近用DeepSeek问了一下如何使用css设置文字的渐变色效果，并且希望可以有动画效果，然而DeepSeek给出的答案动画效果有些bug，于是自己动手改了改。

css渐变文字
下面是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%;
	}
}