我希望在悬停在标题上时填充标题的文本颜色,但文本总是改变颜色,我不知道/认为你可以将一部分背景改为一种颜色而另一种颜色不断变化.我添加了实现悬停的代码,但没有过渡.
: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);
}
}
Hi
/* 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%;
}
AboutServicesPortfolioContact
