Link 在内容中，背景从左到右填充，然后从右到左填充，看起来框从右滑过

Question

我正在尝试在链接上制作动画，背景应该从左到右填充，然后背景应该反转并从右到左。我为第一部分创建了一支笔：

p {
  color: #000;
}

a {
  background: linear-gradient(to right, #903e77 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-position: left bottom;
  transition: background 250ms ease-in-out;
}

<p>This is a sentence with a <a href="#">link</a> in the middle.</p>

我认为这需要一个 span 元素或内部的东西来充当另一个背景块。

效果类似于此处的链接：

https://ueno.co/contact

在页脚中最为明显。

Answer 1

您可以在 link 上使用定位的伪元素并使用 transform

操纵它的位置

p {
  color: #000;
  font-size: 2em;
}

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
}

a:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 100%;
  background: pink;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 1s;
}

a:hover:before {
  transform: translateX(100%);
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

Answer 2

你可以这样调整：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-position: -100% 0;
  transition: background 0.5s ease-in-out;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

或者像这样：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 0 100%;
  background-position: left;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
  transition: background-size 0.5s,background-position 0s 0.5s;
}

a:hover {
  background-size:100% 100%;
  background-position:right;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

也喜欢这个：

p {
  color: #000;
  font-size: 40px;
}

a {
  background: linear-gradient(#903e77, #903e77);
  background-size: 200% 100%;
  background-position: 200% 0;
  background-repeat: no-repeat;
  color: #000;
  text-decoration: none;
  transition:background-position 0.5s;
}

a:hover {
  background-position: -100% 0;
}

<p>This is a sentence with a <a href="">link</a> in the middle.</p>

Link 在内容中，背景从左到右填充，然后从右到左填充，看起来框从右滑过

Link within content, background fill left to right, and then right to left so it looks like the box is sliding right through

html

css

linear-gradients

css-transitions