正如您在下面的代码片段中所看到的,我有一个具有线性渐变背景的按钮。在悬停时,我想将其更改为单一颜色。当我尝试这个效果时,我得到了一个闪烁的效果,背景消失了,然后背景颜色出现了。有什么解决方法可以防止这种闪烁效应吗?
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>
发布于 2019-02-20 22:41:53
对于这些,我只使用了background
。并使用background:linear-gradient(#33afbd,#33afbd);
代替background-color:#33afbd;
a {
text-transform: uppercase;
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: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background:linear-gradient(#33afbd,#33afbd);
}
<a href="#">Button</a>
发布于 2019-02-20 22:44:10
只需将原始background-color
设置为您想要的。
问题是,在转换中,它首先将返回设置为透明,然后设置为悬停所需的颜色。
解决方案:
a {
text-transform: uppercase;
background-color: #33afbd;
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;
}
<a href="#">Button Here</a>
https://stackoverflow.com/questions/54788868
复制相似问题