使用 linear-gradient 控制渐变背景或文本

1.使用 linear-gradient() 控制渐变背景

<div class="bruce" data-title="使用linear-gradient控制渐变背景">
	<div class="linear-gradient">渐变背景</div>
</div>

.linear-gradient{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 80px;
	font-weight: bold;
	height: 100%;
	background: linear-gradient(90deg, #09f, #66f,#f66, #f90, #3c9) left center/400% 400%;
	animation: animate 6s infinite;
}
@keyframes animate {
	0%,
	100% {
		background-position-x: left;
	}
	50% {
		background-position-x: right;
	}
}

2.使用 linear-gradient() 控制渐变文本

<div class="bruce flex-ct-x" data-title="使用linear-gradient控制渐变文本">
	<h1 class="linear-gradient">使用linear-gradient控制渐变文本</h1>
</div>

.linear-gradient{
	background-image: linear-gradient(90deg, #f90, #3c9);
	background-clip: text;
	line-height: 80px;
	font-size: 60px;
	color: transparent;
	animation: hueRotate 5s linear infinite;
}
@keyframes hueRotate {
	from {
		filter: hue-rotate(0);
	}
	to {
		// hue-rotate滤镜除了支持deg，还支持其它CSS3单位，比如圈数turn、弧度rad等
		filter: hue-rotate(360deg); // 360度旋转
	}
}