Question

我已经捞出并修剪了以下内容：

<a class="link link--kukuri" href="#" data-letters="EXAMPLES">EXAMPLE</a>

<style>

.link {text-decoration: none; position: relative; font-size: 72px; color: #c5c5c5;}

.link--kukuri::before {content: attr(data-letters); position: absolute;
overflow: hidden; color: red; width: 0%; -webkit-transition: width 0.5s; transition: width 0.5s;}

.link--kukuri:hover::before {width: 100%;}

</style>

这里是一个jsfiddle：https://jsfiddle.net/4sme500j/1/

我需要的是同样的东西，只有从右到左发生的填充。我已经尝试了这个和那个，但我还是太棒了。

非常感谢你的关注！

Answer 1

默认情况下，css中没有从右到左的转换，因此您必须交换颜色和宽度，如此更新fiddle.

中所示

.link {text-decoration: none; position: relative; font-size: 72px; color: red; font-family: arial;}

.link--kukuri::before {content: attr(data-letters); position: absolute; overflow: hidden; color: #c5c5c5; width: 100%;
-webkit-transition: width 0.5s; transition: width 0.5s;}

.link--kukuri:hover::before {width: 0%;}

这看起来不太正确，但我认为你可以看到原则。

Answer 2

浏览器从width到0从左到右为100%设置动画。但是使用direction css属性，我们可以反转此动画。

但是，在这种情况下，您需要复制内容。即。

<a class="link link--kukuri" href="#">
  <span class="normal-text">EXAMPLE</span>
  <span class="hover-text">EXAMPLE</span>
</a>

我还添加了以下css：

.link {
  direction: rtl;
}
.link--kukuri .normal-text {
  direction: ltr;
}
.link--kukuri .hover-text {
  right: 0;
}

＆＃13;

.link {
  text-decoration: none;
  position: relative;
  font-size: 72px;
  color: #c5c5c5;
  font-family: arial;
  direction: rtl;
}

.link--kukuri .normal-text {
  direction: ltr;
}

.link--kukuri .hover-text {
  position: absolute;
  overflow: hidden;
  color: red;
  width: 0%;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  right: 0;
}

.link--kukuri:hover .hover-text {width: 100%;}

＆＃13;

<a class="link link--kukuri" href="#">
  <span class="normal-text">EXAMPLE</span>
  <span class="hover-text">EXAMPLE</span>
</a>

＆＃13;

文本链接的颜色填充方向

2 个答案: