Подчеркнутая анимированная ссылка с использованием линейного градиента (background-clip?) - PullRequest
Новая
       42

Подчеркнутая анимированная ссылка с использованием линейного градиента (background-clip?)

1 голос
/ 19 января 2020

Ищете идеи о том, как эмулировать эту чистую CSS ссылку, подчеркивающую анимацию загрузки ...

loading animation gif

... но без дополнительной разметки и переносов со ссылкой Текст, как это перо ссылка подчеркивается, а не несколько анимированных фигур 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;
  }
}

1 Ответ

0 голосов
/ 19 января 2020

Полагаю, вам не повезло сделать это с использованием одного градиента, но вот идея, которая полагается на маску, где вам понадобится как минимум 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>

Связанный вопрос, чтобы понять вычисления: Использование процентных значений с фоновой позицией на линейном градиенте

...