使用 3 种不同颜色的动画下划线 link

Question

我尝试使用 3 种不同的颜色为我的悬停事件链接设置动画，但我不知道如何继续。我尝试使用线性渐变属性，但看起来无法对其进行动画处理 (?)

下面是我正在尝试使用一种颜色的示例。

var link = document.querySelector(".dropdown-item");

['mouseover', 'touchstart'].forEach(function (e) {
 link.addEventListener(e, function () {
  link.classList.add("is-active");
 });
});
 
['mouseleave', 'touchleave'].forEach(function (e) {
 link.addEventListener(e, function () {
  link.classList.remove("is-active");
 })
});

li {
  list-style: none;
}

.dropdown-item::after {
 content: '';
 margin: auto;
 padding: 0 10px;
 height: 2px;
 width: 0;
 position: relative;
 bottom: -10px;
 border: 2px solid transparent;
 display: block;
 transition: 0.3s;
}

.is-active.dropdown-item::after {
 width: 100%;
 background: #123456;
 transition: width 0.3;
}

<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>

这就是我想做的，具有相同的过渡效果：

Result

有人知道如何进行吗？

谢谢

Answer 1

可以考虑渐变多背景：

li {
  list-style: none;
}

.dropdown-item {
  padding: 20px 10px;
  border: 2px solid transparent;
  display: block;
  transition: 0.3s;
  background-image: 
    linear-gradient(red, red), 
    linear-gradient(blue, blue), 
    linear-gradient(green, green);
  background-size: 0 10px;
  background-position: bottom left;
  background-repeat: no-repeat;
}

.dropdown-item:hover {
  background-size: 
    33%  10px, 
    66%  10px, 
    100% 10px;
}

<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>

这是另一种方法：

li {
  list-style: none;
}

.dropdown-item {
  padding: 20px 10px;
  border: 2px solid transparent;
  display: block;
  transition: 0.3s;
  background-image: 
    linear-gradient(to right, red 33%,green 33%,green 66%,blue 0);
  background-size: 0 10px;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.dropdown-item:hover {
  background-size: 100% 10px; 
}

<ul>
  <li><a class="dropdown-item" href="#">EXAMPLE</a></li>
</ul>

使用 3 种不同颜色的动画下划线 link

Animating underline link with 3 different colors

html

javascript

css

hyperlink

underline