如何在悬停时从纯色背景转换为背景渐变色的动画?可能是从左到右悬停时?我有这个示例代码,但是鼠标悬停时颜色变化太快。我已经尝试使用以下参考资料: 使用CSS3过渡效果和渐变背景 和 使用CSS动画线性渐变 。但似乎找不到最简单的方法来进行悬停。其他参考资料说要在悬停时添加伪元素,但是在使用时似乎有点复杂。只想在悬停元素时将渐变文本动画化。如何添加这些类型的渐变文本颜色过渡?
示例代码:
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition:all 0.4s ease-in-out;
}
.hover-grad-txt:hover {
background-image:linear-gradient(to right, #01A5F8, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<span class="hover-grad-txt">Spear</span>