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>