【iCSS：色彩】使用linear-gradient控制文本渐变

icss-linear-gradient.markdown

【iCSS：色彩】使用linear-gradient控制文本渐变

A Pen by JowayYoung on CodePen.

License.

index.html

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

style.scss

.gradient-text {
	background-image: linear-gradient(90deg, #f66, #f90);
	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);
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />