html – 在悬停时填充文本颜色动画,带有动画颜色

概述我希望在悬停在标题上时填充标题的文本颜色,但文本总是改变颜色,我不知道/认为你可以将一部分背景改为一种颜色而另一种颜色不断变化.我添加了实现悬停的代码,但没有过渡. :root { --txt-color: #fff; --txt-box-bg: #424242; --main-bg: #000; /* front page title text */ --main-front 我希望在悬停在标题上时填充标题的文本颜色,但文本总是改变颜色,我不知道/认为你可以将一部分背景改为一种颜色而另一种颜色不断变化.我添加了实现悬停的代码,但没有过渡.

: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 >  <span ID="Title-text" >Hi</span></div>

What I want

/* 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.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>

解决方法 您可以考虑使用背景动画,您可以轻松实现此目的.想法是使用背景颜色进行文本着色,然后使用另一个背景图层在悬停时显示/显示此颜色：

: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",-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 >  <span ID="Title-text" >Hi</span></div>

总结

以上是内存溢出为你收集整理的html – 在悬停时填充文本颜色动画,带有动画颜色全部内容，希望文章能够帮你解决html – 在悬停时填充文本颜色动画,带有动画颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。