我正在尝试使用css悬停在缩略图上进行转换,以便在悬停时,背景渐变淡入.转换不起作用,但如果我只是将其更改为rgba()值,则可以正常工作.是否不支持渐变？我也尝试使用图像,它也不会转换图像.
我知道这是可能的,就像在另一篇文章中有人做过的那样,但我无法弄清楚究竟是怎么回事.任何帮助>这里有一些CSS可以使用:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
如何在悬停时添加从纯色到背景渐变色的动画？可能是从左向右悬停时？
我有这个示例代码，但是当悬停时，更改颜色太即时了。
我尝试过使用这些参考文献：
但似乎无法弄清楚如何采用最简单的悬停方法。其他参考资料说在悬停时添加伪元素，但使用它时似乎有点复杂。只是想在为渐变文本设置动画时使用悬停元素。
如何使用这些类型的渐变文本颜色添加过渡？
示例代码：
.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>正如您在下面的代码片段中看到的，我有一个带有线性渐变背景的按钮。在悬停中我想将其更改为单色。当我尝试这种效果时，我得到了一种闪烁效果，背景消失，然后背景颜色出现。有什么解决方法可以防止这种闪烁效应吗？
a {
text-transform: uppercase;
background-color: transparent;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
background-color: #33afbd;
}<a href="#">Button</a>