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

Question

正在寻找有关如何模拟这个纯 CSS 链接下划线加载动画的想法......

• 密码笔：Pure CSS Loading animation
• Embed 没有显示动画，所以这里是一个 Gif：

...但没有额外的标记，并像这支笔一样用链接文本换行。

• 密码笔：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

---

另一个只使用背景的想法：

body {
  background-color: #222;
}

a {
  color: white;
  font-size: 30px;
  text-decoration: none;
  padding-bottom:5px;
  background:
    linear-gradient(to right, 
      currentColor 0 80%,
      transparent  0 calc(80% + 10px),
      currentColor 0 85%,
      transparent  0 calc(85% + 10px),
      currentColor 0 90%,
      transparent  0 calc(90% + 10px),
      currentColor 0) bottom right/1000% 2px no-repeat;
  animation:move 2s linear infinite;
}
.alt {
  -webkit-box-decoration-break: clone;
}

@keyframes move {
  100% {
     background-size:calc(100% + 60px) 2px;
     background-position:bottom 0 right -60px;
  }
}

<a href="#">Animated link underline</a>
<br>
<br>
<a href="#" style="color:red;">Animated multil line<br> underline</a>
<br>
<br>
<a href="#" class="alt" style="color:pink;">Animated multil line<br> underline</a>