悬停时使用动画颜色填充文本颜色动画

Question

当鼠标悬停在标题上时，我想填充标题的文本颜色，但文本总是会改变颜色，我不知道/认为背景的一部分可以变成一种颜色，另一种颜色可以不断变化。我添加了实现悬停的代码，但没有转换。

:root {
--txt-color: #fff;
--txt-box-bg: #424242;
--main-bg: #000;
/* front page title text */
--main-front-color: #00a8ff;
--second-front-color: #e84118;
--third-front-color: #fbc531;
}
* {
margin: 0px;
padding: 0px;
}
/* Text */
.head-text {
font-family: "IBM Plex Sans", sans-serif;
color: var(--txt-color);
}
.main-text {
font-family: "IBM Plex Mono" monospace;
color: var(--txt-color);
}
/* Allgin */
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* classes */
.front-page {
background-color: var(--main-bg);
color: #000;
animation: text-rainbow 13s linear infinite;
}
.full-page {
background-size: cover;
height: 100vh;
}
/* IDs */
#title-text {
position: absolute;
color: var(--main-bg);
font-weight: bold;
text-align: center;
font-size: 90px;
-webkit-text-stroke: 2px var(--main-front-color);
animation: stroke-rainbow 13s linear infinite;
}
#title-text:hover {
color: inherit;
}
@keyframes stroke-rainbow {
0% {
border-color: var(--main-front-color);
-webkit-text-stroke-color: var(--main-front-color);
}
25% {
border-color: var(--second-front-color);
-webkit-text-stroke-color: var(--second-front-color);
}
50% {
border-color: var(--third-front-color);
-webkit-text-stroke-color: var(--third-front-color);
}
75% {
border-color: var(--second-front-color);
-webkit-text-stroke-color: var(--second-front-color);
}
100% {
border-color: var(--main-front-color);
-webkit-text-stroke-color: var(--main-front-color);
}
}
@keyframes text-rainbow {
0% {
color: var(--main-front-color);
}
25% {
color: var(--second-front-color);
}
50% {
color: var(--third-front-color);
}
75% {
color: var(--second-front-color);
}
100% {
color: var(--main-front-color);
}
}

<div class="front-page full-page">
<span id="title-text" class="center head-text">Hi</span>
</div>

我想要什么

/* REQUIRES FALLBACK FOR FIREFOX */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
nav {
display: flex;
height: 100%;
}
nav ul {
align-self: center;
}
a {
font: 300 42px/1.5 "Helvetica Neue", sans-serif;
margin-left: 80px;
color: #d7a150;
text-decoration: none;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #283271, #283271 50%, #d7a150 50%);
background-size: 200% 100%;
background-position: 100%;
}
a:hover {
transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
background-position: 0%;
}

<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Answer 1

您可以考虑背景动画，并且可以轻松实现这一点。这个想法是使用background-color进行文本着色，然后有另一个背景层，在悬停时显示/显示这种着色：

:root {
--txt-color: #fff;
--txt-box-bg: #424242;
--main-bg: #000;
/* front page title text */
--main-front-color: #00a8ff;
--second-front-color: #e84118;
--third-front-color: #fbc531;
}
* {
margin: 0px;
padding: 0px;
}
/* Text */
.head-text {
font-family: "IBM Plex Sans", sans-serif;
color: var(--txt-color);
}
.main-text {
font-family: "IBM Plex Mono" monospace;
color: var(--txt-color);
}
/* Allgin */
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* classes */
.front-page {
background-color: var(--main-bg);
color: #000;
}
.full-page {
background-size: cover;
height: 100vh;
}
/* IDs */
#title-text {
position: absolute;
/*Color the text with background*/
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/**/
/*The animated layer*/
background-image:linear-gradient(#000,#000);
background-size:100% 100%;
background-position:right;
background-repeat:no-repeat;
/**/
transition:1s all;
font-weight: bold;
text-align: center;
font-size: 90px;
-webkit-text-stroke: 2px var(--main-front-color);
animation: stroke-rainbow 13s linear infinite,
text-rainbow 13s linear infinite;
}
#title-text:hover {
background-size:0% 100%;
}
@keyframes stroke-rainbow {
0% {
border-color: var(--main-front-color);
-webkit-text-stroke-color: var(--main-front-color);
}
25% {
border-color: var(--second-front-color);
-webkit-text-stroke-color: var(--second-front-color);
}
50% {
border-color: var(--third-front-color);
-webkit-text-stroke-color: var(--third-front-color);
}
75% {
border-color: var(--second-front-color);
-webkit-text-stroke-color: var(--second-front-color);
}
100% {
border-color: var(--main-front-color);
-webkit-text-stroke-color: var(--main-front-color);
}
}
@keyframes text-rainbow {
0% {
background-color: var(--main-front-color);
}
25% {
background-color: var(--second-front-color);
}
50% {
background-color: var(--third-front-color);
}
75% {
background-color: var(--second-front-color);
}
100% {
background-color: var(--main-front-color);
}
}

<div class="front-page full-page">
<span id="title-text" class="center head-text">Hi</span>
</div>