悬停时的边框动画，透明部分从左向右移动答案

【问题标题】：Border animation on hover with a transparent section moving left to right悬停时的边框动画，透明部分从左向右移动
【发布时间】：2022-02-10 20:20:52
【问题描述】：

我有这段代码试图在悬停时制作动画。像这样：

TextLink      hover: TextLink
--------             --  ----

我正在尝试制作一个看起来像“透明”部分从向左移动到文本结尾的动画。

body {
  margin: 0;
  background: #16263d;
}

div {
  padding: 30px;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-top: 24px;
  transition: all 0.75s ease-in-out;
}

a span {
  border-bottom: 2px solid #fff;
}

a:hover:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  transform: translateX(100%);
}

a:after {
  content: '';
  width: 35px;
  height: 2px;
  background: #16263d;
  display: block;
  position: relative;
  opacity: 1;
  transform: translateX(-35px);
  transition: all 0.75s ease-in-out;
}

<div>
  <a href="#"><span>Text Link and something more than this</span></a>
</div>

问题是没有考虑 100% 的转换过渡......似乎只有 100px。

【问题讨论】：

您的代码输出似乎与您所寻求的非常相似。你能解释一下你分享的代码有什么问题吗？是否需要底部边框的“透明”部分位于文本链接的中心？
用虚线代替实线
我正在尝试制作一个看起来像“透明”部分从左移动到文本末尾的动画。希望现在更加清晰。

标签： css animation css-transitions border

【解决方案1】：

首先，您需要了解转换的百分比值是元素边界框（大小）的一部分，而不是其父元素。
由于伪元素是 35px 宽，变换将其移动 35px。 (see MDN for more info)

也就是说，您可以像这样在伪元素上为“透明”部分使用边框：

body {
  background: #16263d;
}

a {
  font-size:20px;
  position:relative;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding:.2em 0;
  border-bottom: 2px solid #fff;
}
a:after {
  content: '';
  position:absolute;
  bottom:-2px;
  right:100%;
  width:100%;
  height: 2px;
  border-right: 35px solid #16263d;
  transition: transform 0.75s ease-in-out;
}

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

&lt;a href="#"&gt;Text Link and something more than this&lt;/a&gt;

【讨论】：

感谢您的解释和解决方案

【解决方案2】：

尝试使用渐变：

span {
 --g:40px; /* the gap */

 font-size:40px;
 background:
   linear-gradient(90deg,
      black   calc(50% - var(--g)/2),
      #0000 0 calc(50% + var(--g)/2), 
      black 0
   ) right bottom/calc(200% + var(--g)) 3px /* 3px = thickness */
   no-repeat;
}

span:hover {
  background-position: left bottom;
  transition:0.5s;
}

&lt;span&gt;Some text&lt;/span&gt;

【讨论】：