javascript

#javascript| 来源: 网络整理| 查看: 265

页面加载时无法在div中显示颜色填充动画时间：2018-01-18 12:55:53

标签： javascript html css jquery-waypoints

$("#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中的颜色，当航点到达特定区域时，对用户有一些很好的动画效果，但我无法实现它，尝试过渡效果和关键帧似乎没有工作，任何帮助将非常感激。

1 个答案:

答案 0 :(得分：2)

在您的情况下，您可以为background-size设置动画，而不是background-image（that you cannot animate）并将linear-gradient设为一种颜色，因为白色部分将是没有背景的部分：

＆＃13; ＆＃13; .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; ＆＃13; ＆＃13; ＆＃13;

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章