gpt4 book ai didi

javascript - 页面加载时无法在 div 中显示颜色填充动画

转载 作者:行者123 更新时间:2023-11-27 23:07:07 24 4
gpt4 key购买 nike

$("#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 中填充颜色,为用户提供一些不错的动画效果,但我无法实现它,尝试过过渡效果和关键帧似乎都不起作用,非常感谢任何帮助。

最佳答案

在您的情况下,您可以为 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%;
}
<div class="d8"></div>

关于javascript - 页面加载时无法在 div 中显示颜色填充动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48321904/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com