CSS鼠标悬停文本渐变效果代码示例

<p class="color-transition">这是一个文本</p>
<style>
.color-transition {
  color: black; /* 初始文本颜色 */
  transition: color 0.5s; /* 过渡效果，可根据需要调整时间 */
}

.color-transition:hover {
  color: red; /* 鼠标悬停时的文本颜色 */
}
</style>
<p>使用CSS的:hover伪类和过渡效果来实现鼠标在文本上时文本渐渐变色的效果。</p>
<p>在上述代码中，首先给文本添加了一个类名 <code>.color-transition</code>，初始文本颜色为黑色。然后使用 <code>transition</code> 属性来设置颜色的过渡效果，这里设置为0.5秒。最后，在:hover伪类中设置鼠标悬停时的文本颜色为红色。</p>
<p>这样，当鼠标悬停在文本上时，文本的颜色就会从黑色渐变到红色。你可以根据需要自行调整颜色和过渡时间。</p>