原代码在这里 https://codepen.io/kevinhufnagl/pen/mdVvvwj
<html>
<head>
<title>Vercel like text gradient transition</title>
<style>
:root {
--gradient-color-1: #ef008f;
--gradient-color-2: #6ec3f4;
--gradient-color-3: #7038ff;
--gradient-color-4: #c9c9c9;
}
.process-step-title-container {
margin-top: -16px;
position: relative;
}
.process-step-title,
.process-step-title-overlay {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 156px;
font-weight: 900;
margin: 0;
line-height: 1.2em;
letter-spacing: -4px;
}
.process-step-title-overlay {
position: absolute;
top: 0;
left: 0;
width: auto;
padding-right: 30px;
height: 100%;
opacity: 1;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.process-step-1 .process-step-title-overlay {
background-image: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2));
animation: animated-gradient-title-1 8s infinite;
}
.process-step-2 .process-step-title-overlay {
background-image: linear-gradient(90deg, var(--gradient-color-2), var(--gradient-color-3));
animation: animated-gradient-title-2 8s infinite;
}
.process-step-3 .process-step-title-overlay {
background-image: linear-gradient(90deg, var(--gradient-color-3), var(--gradient-color-1));
animation: animated-gradient-title-3 8s infinite;
}
@keyframes animated-gradient-title-1 {
0%,
16.667%,
100% {
opacity: 1;
}
33.333%,
83.333% {
opacity: 0;
}
}
@keyframes animated-gradient-title-2 {
0%,
16.667%,
66.667%,
100% {
opacity: 0;
}
33.333%,
50% {
opacity: 1;
}
}
@keyframes animated-gradient-title-3 {
0%,
50%,
100% {
opacity: 0;
}
66.667%,
83.333% {
opacity: 1;
}
}
</style>
</head>
<body>
<section class="section-process">
<div class="section-container">
<div class="process-steps-container container-medium with-padding">
<div class="process-step-container process-step-1">
<div class="process-step-title-container">
<h1 class="process-step-title">Plan</h1>
<div class="process-step-title-overlay">Plan</div>
</div>
</div>
<div class="process-step-container process-step-2">
<div class="process-step-title-container">
<h1 class="process-step-title">Design</h1>
<div class="process-step-title-overlay">Design</div>
</div>
</div>
<div class="process-step-container process-step-3">
<div class="process-step-title-container">
<h1 class="process-step-title">Develop</h1>
<div class="process-step-title-overlay">Develop</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>