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

Question

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

代码笔：Pure CSS Loading animation
嵌入没有显示动画，所以这是一个 Gif：

...但没有额外的标记并用 link 文本包裹，就像这支笔一样。

代码笔：https://codepen.io/dragontheory/pen/RwNLLyX

动画 background-clip 可以用于 "poke holes" 通过 link 下划线而不是多个 6x1 background-image: linear-gradient 形状动画超过了吗？

谢谢！

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>

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

Animated link underline using linear-gradient (background-clip?)

css

linear-gradients

css-transitions

css-animations