大家好,我在 jQuery 中得到了这段代码:
function onRight() {
$(this).css(
'background',
'linear-gradient(to right, rgb(255, 255, 255), rgb(196, 196, 196)'
);
}
效果很好,但我遇到了一个问题,变化太快了。 我怎样才能让它看起来像淡入?或者只是使用任何持续时间来减慢速度?
** 不能用 css 做,因为它的渐变。
衷心感谢
最佳答案
这完全可以通过 CSS 单独实现:- 如 Ana Tudor 所示:https://codepen.io/thebabydino/pen/jBbXPP
/* <- Demo Stuff Start */
body{
font-family: 'Montserrat', sans-serif;
margin:0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 80vw;
margin: 0 auto;
min-height: 100vh;
}
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%;
color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
/* Demo Stuff End -> */
/* <- Magic Stuff Start */
.btn:hover { --x: 100%; }
.btn-1 {
--c1: #f6d365;
--c2: #fda085;
}
.btn-2 {
--c1: #fbc2eb;
--c2: #a6c1ee;
}
.btn-3 {
--c1: #84fab0;
--c2: #8fd3f4;
}
.btn-4 {
--c1: #a1c4fd;
--c2: #c2e9fb;
}
.btn-5 {
--c1: #ffecd2;
--c2: #fcb69f;
}
/* Magic Stuff End -> */
<div class="container">
<a class="btn btn-1">Hover me</a>
<a class="btn btn-2">Hover me</a>
<a class="btn btn-3">Hover me</a>
<a class="btn btn-4">Hover me</a>
<a class="btn btn-5">Hover me</a>
</div>
关于jQuery 悬停效果 - 如何让它变慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53328922/