背景以及文本渐变

最新推荐文章于 2025-04-24 12:18:45 发布

原创最新推荐文章于 2025-04-24 12:18:45 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#背景渐变 #文本渐变

前端小知识点专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何使用CSS的linear-gradient属性创建动态背景和文本渐变效果，通过关键帧动画实现背景位置的变化，使背景颜色平滑过渡，同时展示如何将渐变应用于文本，使其随时间变化色彩。

使用linear-gradient控制背景渐变

<div class="bruce">
	<div class="gradient-bg">iCSS</div>
</div>



.gradient-bg {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;
	font-weight: bold;
	font-size: 100px;
	color: #fff;
	animation: move 10s infinite;
}
@keyframes move {
	0%,
	100% {
		background-position-x: left;
	}
	50% {
		background-position-x: right;
	}
}

使用linear-gradient控制文本渐变

<div class="bruce flex-ct-x">
	<h1 class="gradient-text">Full Stack Developer</h1>
</div>

.gradient-text {
	background-image: linear-gradient(90deg, $red, $orange);
	background-clip: text;
	line-height: 60px;
	font-size: 60px;
	animation: hue 5s linear infinite;
	-webkit-text-fill-color: transparent;
}
@keyframes hue {
	from {
		filter: hue-rotate(0);
	}
	to {
		filter: hue-rotate(-1turn);
	}
}