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

最新推荐文章于 2023-04-20 16:17:55 发布

qingzhen568

最新推荐文章于 2023-04-20 16:17:55 发布

阅读量468

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43919509/article/details/120719234

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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度旋转
	}
}