SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文字高光</title>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
			background-color: #333;
			font-family: Arial, sans-serif;
		}

		.text-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}

		.highlight-container {
			position: relative;
			overflow: hidden;

		}

		.text {
			font-size: 2.625rem;
			position: relative;
			z-index: 1;
			margin: 20px;
		}

		.highlight-block {
			position: absolute;
			top: 30%;
			left: 10%;
			width: 1.25rem;
			height: 1.875rem;
			transform: translateY(-50%);
			animation: sweep 2s infinite linear;
			filter: blur(.3125rem);
            transform: rotate(10deg);
		}

		.text-1 {
			background: white;
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			background-image: linear-gradient(to right bottom, #673b17, #d09e52);
		}

		.highlight-container-1 {
			background-color: white;
		}

		.highlight-block-1 {
			background: white;
			z-index: 3;
		}

		.text-2 {
			background: linear-gradient(to right bottom, #f9ea9d, #e2be5a, #f9ea9d);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.highlight-container-2 {
			background-color: rgb(44, 150, 2);
		}

		.highlight-block-2 {
			background: linear-gradient(90deg,
			transparent,
			rgba(144, 238, 144, 0.6),
			transparent)
		}

		@keyframes sweep {
			0% {
				left: -100%;
			}
			100% {
				left: 100%;
			}
		}
	</style>
</head>

<body>
	<div class="text-container">
		<div class="highlight-container highlight-container-1">
			<div class="text text-1">90091</div>
			<div class="highlight-block highlight-block-1"></div>
            
		</div>
        <div class="highlight-container highlight-container-1">
			<div class="text text-1">90091</div>
			<div class="highlight-block highlight-block-1"></div>
            
		</div>
		<div class="highlight-container highlight-container-2">
			<div class="text text-2">12356</div>
			<div class="highlight-block highlight-block-2"></div>
		</div>
	</div>
</body>

</html>