如何使链接的背景跟随光标？

Question

我正在尝试制作动画链接。根据光标从哪一侧进入链接，其背景应该从下到上或从上到下显示。链接的效果应该像光标后面的背景一样。

我设法使背景从下到上出现，但为什么它不起作用，反之亦然？

Codepen

<ul class="list">
<li class="list__item">test link 1</li>
<li class="list__item">test link 2</li>
<li class="list__item">test link 3</li>
<li class="list__item">test link 4</li>
<li class="list__item">test link 5</li>
</ul>
.list__item {
border: 1px solid red;
display: flex;
width: 300px;
padding: 10px;
cursor: pointer;
}
.from-top {
transition: all .2s ease;
background: linear-gradient(to bottom, red 50%, transparent 50%);
background-position: top;
background-size: 100% 200%;
}
.from-bottom {
transition: all .2s ease;
background: linear-gradient(to top, red 50%, transparent 50%);
background-position: bottom;
background-size: 100% 200%;
}

const list = document.querySelectorAll('.list__item');
list.forEach(item => {
item.addEventListener('mouseover', (evt) => {
if (evt.offsetY < 10) {
console.log('top', evt.offsetY);
item.classList.add('from-top');
} else {
console.log('bottom', evt.offsetY);
item.classList.add('from-bottom');
}
});
item.addEventListener('mouseleave', (evt) => {
item.classList.remove('from-top');
item.classList.remove('from-bottom');
});
});

Answer 1

为了更好地理解这里发生的事情，我建议你弄清楚你实际上试图动画化的属性。

我对你的钢笔做了一点改动，使它能用。在这里你可以看到，我的案例中的主要属性是background-size

在您的示例中，从上到下的方向不起作用的原因是您为background-size和background-position设置了动画，初始值为top，并且您试图从top到top设置动画——这就是为什么在这种情况下什么都不发生，而从下到的方向则相反，因为动画从初始top到bottom在CCD_ 9类中定义。