将鼠标悬停在这里，文字颜色将会平滑地从黑色变成其他颜色。

<p class="color-text">将鼠标悬停在这里，文字颜色将会平滑地从黑色变成红色。</p>

<!-------------鼠标悬停 文本颜色平滑改变---------------->
<style>
.color-text {
font-size:30px;
color: black;
font-weight: bold;
transition: color 1.7s ease-in-out, font-weight 0.5s ease-in-out;
}

.color-text:hover {
color: #2779CE;
font-weight: bold;
}
</style>
<!-------------鼠标悬停 文本颜色平滑改变---------------->