如何让link的背景跟随光标？

Question

我正在尝试制作动画 link。根据光标从哪一侧输入 link - 它的背景应该从下到上或从上到下显示。链接应该有背景跟随光标的效果。

我设法使背景从下到上显示，但为什么反之不起作用？

 <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

为了更好地理解这里发生的事情，我建议您弄清楚您实际上要为哪个属性制作动画。

我对你的笔做了一些修改，让它可以工作。 Here 你可以看到我的主要属性是 background-size

它在你的例子中用 from top 方向不起作用的原因是你动画 background-size 以及 background-position 初始值是top 并且你试图从 top 到 top 进行动画处理——这就是为什么在这种情况下没有任何反应，反之亦然 from bottom 方向，因为那里动画从最初的 top 变为您在 .from-bottom class.

中定义的 bottom

如何让link的背景跟随光标？

How to make link's background follows cursor?

javascript

css

animation

gradient

hover