CSS特效010：文字颜色渐变的流光效果

查看专栏目录

文章目录

css实战中，怎么绘制文字颜色渐变的流光效果呢？ 本示例设置背景的渐变属性，利用文字填充色和background-clip的联合作用，在动画中采用背景的飘移，达到一个文字流光的效果。

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [e-mail]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-15
*/
<template>
	<div class="container">
		<div class="top">
			<h3>文字颜色渐变的流光效果</h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi">
           大剑师的博客BLOG
		</div>
	</div>
</template>

<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: lightcoral;
		color: #fff;
	}

	.dajianshi {
		margin-top:100px;
		font-size: 80px;
		background: -webkit-linear-gradient(75deg,
				#2eaf8d,
				#2f6ae6 25%,
				#347ba6 50%,
				#16d225 55%,
				#4cc410 60%,
				#bb2c10 80%,
				#2f63a4 95%,
				#28dfd4);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-background-size: 200% 100%;
		-webkit-animation: flowCss 5s infinite linear;
	}

	@-webkit-keyframes dajianshiFlow {
		0% {
			/* 移动背景位置 */
			background-position: 0 0;
		}
		100% {
			background-position: -400% 0;
		}
	}
	.dajianshi:hover {
		-webkit-animation: dajianshiFlow 3s infinite linear;
	}
</style>

CSS基础知识点

结尾语

CSS的应用无处不在，希望某个片段就能帮助你，欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。