文本填充效果 - 模拟通过文本的颜色块

Question

我试图创建一个文本效果，所以当你将鼠标悬停在文本上时，一块颜色似乎会通过文本。

我通过使用:before伪元素来完成the first example here（对于单词＆＃34; Kukuri＆＃34;）来实现颜色填充。我在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％填充。

最终目标是将其用于导航菜单。当你悬停时，像这种效果的东西似乎是一块颜色正在通过菜单项移动：

对于这样的事情，将鼠标悬停在＆＃34;关于＆＃34;

时，项目会使填充颜色消失

尝试解决方案

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

2. 我试图调查mix-blend-mode尝试创建一个可能为文本添加颜色的矩形蒙版。但是，根据我的理解，mix-blend-mode仅适用于文字，而不适用于带背景颜色的矩形div。

Answer 1

您可以通过简单地使用透明背景在元素上方传递的图层来执行此类操作：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以下是使用mix-blend-mode文字的另一个例子：

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用混合模式来实现此效果，这里有一个可能性：

我选择移动伪的背景而不是移动伪本身，这样当伪于其他元素时，你不会有副作用。

另外，如果你想要一张幻灯片或一张双张幻灯片，我也不清楚。我把它设置为双倍（从黑色到红色再到黑色。你可以轻松地改变这个，调整最终的背景位置

＆＃13;

＆＃13;

.demo {
    background-color: yellow;
    margin: 10px;
    display: inline-block;
    font-size: 50px;
    padding: 10px;
    position: relative;
}

.demo:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75% );
    mix-blend-mode: lighten;
    background-size: 400% 100%;
    transition: background-position 2s linear;
    background-position: 100% 0%;
}

.demo:hover:after {
    background-position: 0% 0%;
}

＆＃13;

<div class="demo">TEST1</div>
<div class="demo">TEST2</div>

＆＃13;

＆＃13;

＆＃13;

要将移动更改为垂直，您需要更改

• 渐变方向
• 哪个图像尺寸超大
• 悬停时更改的背景位置

＆＃13;

＆＃13;

.demo {
    background-color: yellow;
    margin: 10px;
    display: inline-block;
    font-size: 50px;
    padding: 10px;
    position: relative;
}

.demo:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, transparent 25%, red 25%, red 75%, transparent 75% );
    mix-blend-mode: lighten;
    background-size: 100% 400%;   /* changed vertical dimension */
    transition: background-position 2s linear;
    background-position: 0% 100%; /* changed 100 position to vertical*/
}

.demo:hover:after {
    background-position: 0% 0%;
}

＆＃13;

<div class="demo">TEST1</div>
<div class="demo">TEST2</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

    .text {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #c5c2b8;
    position:relative;
}
    .text:before {
    	content: attr(data-letters);
    	position: absolute;
    	z-index: 2;
    	overflow: hidden;
    	color: red;
    	white-space: nowrap;
    	width: 0%;
        top:0;
    	-webkit-transition: width 0.4s 0.3s;
    	transition: width 0.4s 0.3s;
    }

    .text:hover:before {
    	width: 100%;
    }
    <span class="text" href="#" data-letters="hello">hello</span>