css 实现文字渐变以及文字颜色流动

文字渐变需要了解以下属性：

background-image：背景色

background-clip：此属性规定背景的绘制区域，有四个值：

border-box，背景被裁剪到边框盒。
padding-box，背景被裁剪到内边距框。
content-box，背景被裁剪到内容。
text，表示只显示文字区域。

-webkit-text-fill-color：文字填充色，实现文字渐变色要展示的是背景的渐变颜色，所以这里我们需要设置为transparent( 寻常的- webki t-表示的是Chrome和Safari的私有属'性，但是它却声明了所有的，除了IE浏览器))

-webkit-text-stroke:1px black;实现镂空文字（文字边框）

详细可参考：[CSS] 🌈在字间流淌 | 第十二期_哔哩哔哩_bilibili


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
 
			body {
				display: flex;
				height: 100vh;
				align-items: center;
				justify-content: center;
			}
 
			p {
				font-size: 4vh;
				font-weight: 600;
				background-clip: text;
				-webkit-background-clip: text;
				/*这次的这句和以往不一样*/
				/* 以往是 考虑低版本浏览器*/
				/*这次就连最新版Chrome和Safari都得 */
				/*注意是background-clip: text;需要 */
				/*如果是: content啊之 类的就没这么苛刻的*/
				-webkit-text-fill-color: transparent;
				/*这个属性的- webkit前缀也比较特殊 */
				/*寻常的- webki t-表示的是Chrome和Safari的私有属'性*/
				/*但是它却声明了所有的(除了IE浏览器)*/
				background-image:
					linear-gradient(90deg,
						rgb(255, 167, 69),
						rgb(254, 134, 159),
						rgb(239, 122, 200),
						rgb(160, 131, 237),
						rgb(67, 174, 255),
						rgb(160, 131, 237),
						rgb(239, 122, 200),
						rgb(254, 134, 159),
						rgb(255, 167, 69));
				background-size: 200%;				
			}
 
			p:hover {
				animation: streamer 2s linear infinite;
			}
 
			@keyframes streamer {
				0% {
					background-position: 0%;
				}
 
				100% {
					background-position: 200%;
				}
			}
		style>
	head>
	<body>
		<p>何以与君识，无言泪千行p>
	body>
html>

相关阅读:
【2023年11月第四版教材】第16章《采购管理》（合集篇）
大厂面试必备 - async/await 详解
OpenCV-Python快速入门（九）：直方图
RabbitMQ从0到1完整学习笔记一：《基础篇》
链接装载与库：第六章——可执行文件的装载与进程
献给Nacos小白的一篇好文：配置参数使用及存储
【区块链 | 智能合约】Ethereum源代码（2）- go-ethereum 客户端入口代码和Node分析
用Python实现基于人脸识别的门禁管理系统(附源码)
【java基础系列】12- java的数组（二）
vue cli3开发自己的插件发布到npm

原文地址：https://blog.csdn.net/chaseqrr/article/details/126415113