使用线性渐变的动画链接下划线（背景剪辑？）

Question

正在寻找有关如何模拟此纯CSS链接的注意事项，在下划线时加载动画...

• Codepen：Pure CSS Loading animation
• 嵌入未显示动画，因此这是Gif：

...但是没有多余的标记，并且像这样的笔一样用链接文本包裹起来。

• Codepen：https://codepen.io/dragontheory/pen/RwNLLyX

动画background-clip是否可用于“戳孔” 贯穿链接下划线，而不是多个6x1 background-image: linear-gradient动画over形状吗？

谢谢！

HTML：

<a href="#">Animated link underline</a>

CSS：

body {background-color: #222;}
a {
  color: white;
  font-size: 20px;
  text-decoration: none;
  position: relative;
  animation: underline 1s infinite;
  background: linear-gradient(currentColor, currentColor) bottom / 0 1px no-repeat;
  -webkit-background-clip: content-box;
}
@keyframes underline {
  from {
    -webkit-background-clip: content-box;
    -webkit-text-fill-color: transparent;
    background-size: 1px 6px;
  }
  to {
    -webkit-background-clip: content-box;
    -webkit-text-fill-color: transparent;
    background-size: 1px 6px;
  }
}

Answer 1

我想您很遗憾使用一个渐变来完成此操作，但是这是一个依赖于蒙版的想法，您至少需要3个渐变来创建孔。好处是渐变是相同的，因此使用CSS变量我们可以将其视为一个渐变。

body {
  background-color: #222;
}

a {
  color: white;
  font-size: 30px;
  text-decoration: none;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: -150%;
  height: 2px;
  background: currentcolor;
  --grad: linear-gradient(to right, white calc(50% - 5px), transparent calc(50% - 5px) calc(50% + 5px), white 0);
  -webkit-mask: var(--grad), var(--grad), var(--grad);
  -webkit-mask-size: 230% 100%, 280% 100%, 350% 100%;
  -webkit-mask-position: 100% 0;
  -webkit-mask-composite: destination-in;
  mask: var(--grad), var(--grad), var(--grad);
  mask-size: 230% 100%, 280% 100%, 350% 100%;
  mask-position: 100% 0;
  mask-composite: intersect;
  animation: move 4s infinite ease-out;
}

@keyframes move {
  100% {
    -webkit-mask-position: 54% 0;
    mask-position: 54% 0;
  }
}

<a href="#">Animated link underline</a>

蒙版部分并不难。所有技巧都取决于渐变和位置动画。

这里有一个更好的例子来理解这个技巧。绿色正方形是先前代码中的孔：

body {
  background-color: #222;
}

a {
  color: white;
  font-size: 30px;
  text-decoration: none;
  position: relative;
  display: inline-block;
  overflow:hidden;
}

a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: -150%;
  height: 8px;
  --grad: linear-gradient(to right, transparent calc(50% - 5px), green calc(50% - 5px) calc(50% + 5px), transparent 0);
  background: var(--grad), var(--grad), var(--grad);
  background-size: 230% 100%, 280% 100%, 350% 100%;
  background-position: 100% 0;
  animation: move 4s infinite ease-out;
}

@keyframes move {
  100% {
    background-position: 54% 0;
  }
}

<a href="#">Animated link underline</a>

了解计算的相关问题：Using percentage values with background-position on a linear gradient