javascript - 文字填充效果——模拟一 block 颜色穿过文字

Question

我正在尝试创建一种文本效果，因此当您将鼠标悬停在文本上时，一 block 颜色似乎会穿过文本。

我完全遵循了the first example here (对于单词“Kukuri”)通过使用 :before 伪元素来实现颜色填充。我在 SCSS 中编写了代码:

.text {
  position: relative;

  &:hover { 
    &:before {
      width: 100%;
    }
  } 

  &:before {
    content: 'HELLO'; // if our text was "HELLO"
    width: 0%;
    position: absolute;
    z-index: 2;
    overflow: hidden;
    color: red;
    transition: width 350ms ease-in-out;
    white-space: nowrap;
    width: 0%;
  }
}

但是，我想知道是否可以用另一种方式为 :before 元素的宽度设置动画？因此，一旦它达到 100% 宽度并填充颜色，左侧开始清空并返回到 0% 填充。

最终目标是将其用于导航菜单。类似这种效果，当您将鼠标悬停时，颜色 block 似乎在菜单项中移动:

对于这样的事情，将鼠标悬停在“关于”项上会使填充颜色消失，同时

尝试的解决方案

1. 我尝试翻译 :before 元素，更改 left 和 right 属性，并更改 transform-origin 无济于事。

2. 我已经尝试研究 mix-blend-mode 以尝试创建一个矩形蒙版，它可能会为文本添加颜色。但是，据我了解，mix-blend-mode 仅适用于文本，不适用于具有背景色的矩形 div。

Answer 1

您可以通过简单地使用一个在具有透明背景的元素上方传递的图层来执行类似的操作:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  margin: 10px;
  position: relative;
  font-size: 30px;
  color: red;
  font-weight: bold;
  overflow: hidden;
}

ul li:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  transition: 2s;
  z-index: 2;
}

ul.ver li:before {
  top: 0;
  left: -100%;
}

ul.hor li:before {
  top: -100%;
  left: 0;
}

ul.ver li:hover::before {
  left: 100%;
}

ul.ver.half li:hover::before {
  left: 0;
}

ul.hor li:hover::before {
  top: 100%;
}
ul.hor.half li:hover::before {
  top: 0;
}

<ul class="hor">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="hor">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="ver half">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="hor half">
  <li>Home</li>
  <li>About</li>
</ul>

这是另一个使用 mix-blend-mode 和文本的例子:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  margin: 10px;
  position: relative;
  font-size: 30px;
  background-image: linear-gradient(to right, red, red);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  font-weight: bold;
  overflow: hidden;
  transition: 1s;
}
ul.hor li {
  background-position: 0% 200%;
}
ul.ver li {
  background-position: 200% 0%;
}

ul li span {
  display: inline-block;
  color: black;
  background-color: white;
  mix-blend-mode: screen;
}

ul.hor li:hover {
  background-position: 0% -100%;
}
ul.ver li:hover {
  background-position:-100% 0%;
}
ul.hor.half li:hover {
  background-position: 0% 0%;
}
ul.ver.half li:hover {
  background-position:0% 0%;
}

<ul class="hor">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="ver">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="hor half">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="ver half">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>