$("#whoami").waypoint(function() {
console.log('you have scrolled to the h1!');
});
.d8{
border: 1px solid black;
width: 100%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background: linear-gradient(to right, #e74c3c 85%, #FFF 50%);
}
<div class="d8"></div>
现在我一直在尝试填充div中的颜色,当航点到达特定区域时,对用户有一些很好的动画效果,但我无法实现它, 尝试过渡效果和关键帧似乎没有工作,任何帮助将非常感激。
答案 0 :(得分:2)
在您的情况下,您可以为background-size
设置动画,而不是background-image
(that you cannot animate)并将linear-gradient
设为一种颜色,因为白色部分将是没有背景的部分:
.d8 {
border: 1px solid black;
width: 80%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background-image: linear-gradient(to right, #e74c3c, #e74c3c);
background-size: 80% 100%;
background-repeat: no-repeat;
transition: 0.5s;
}
.d8:hover {
background-size: 100% 100%;
}
&#13;
<div class="d8"></div>
&#13;