我目前正在尝试制作在悬停时会以彩虹形式改变颜色的文本，并且效果很好，唯一的问题是当您将鼠标从文本上移开时，它会立即跳转到原始颜色，我希望它从上一种颜色流畅地淡入原始颜色，因此看起来更平滑。
此外，如果您建议以任何不同的方式或使用任何其他语言来执行此操作，我完全愿意这样做。
我通常是过渡的新手，我似乎无法弄清楚这一点。
<style>
.logo {
font-size: 100px;
margin-top: 10px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
color: #FF006E;
}
.logo:hover {
-webkit-animation:logo 1s infinite;
-ms-animation:logo 1s infinite;
-o-animation:logo 1s infinite;
animation:logo 1s infinite;
}
@-webkit-keyframes logo {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes logo {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes logo {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes logo {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
</style>
<div class="logo">
I am RainbowText! Fear me! :D
</div>
最佳答案
.logo {
font-size: 100px;
margin-top: 10px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
color: #FF006E;
transition: color 2s;
}
div 中的 transition 就可以了!
关于html - 未悬停时的 CSS 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29936878/