如何在悬停时将动画从纯色添加到背景渐变色?可能从左到右悬停时?
我有这个示例代码,但是当鼠标悬停时,更改颜色太快了。
我尝试过使用这些引用资料:
Use CSS3 transitions with gradient backgrounds
Animating Linear Gradient using 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>
最佳答案
要对其进行动画处理,而不是尝试对渐变进行动画处理,您可以对其位置进行动画处理。
让我们为您的背景使用新的线性渐变。
它会从纯色变为渐变色
渐变中的第一种颜色,然后它将成为渐变中第二种颜色的渐变。
类似这样的:
background-image:linear-gradient(向右, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
然后你调整大小只看到纯色:
背景尺寸:300% 100%;
它的位置:
背景位置:左上角;
悬停时您需要做的就是移动它:
背景位置:左上角100%;
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 100%;
background-position: top left;
transition:all 1s ease-in-out;
}
.hover-grad-txt:hover {
background-position: top left 100%;
}
<span class="hover-grad-txt">Spear</span>
关于html - 悬停时如何将过渡动画添加到渐变文本背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73330467/