html - 内容内的链接，背景从左到右填充，然后从右到左填充，这样看起来盒子正在向右滑动

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

在页脚是最引人注目的。

标签： htmlcsscss-transitionslinear-gradients

Answer 1

你可以像这样调整它：

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>