Анимация CSS-градиента работает, только если текст не переносится - PullRequest
Новая
       10

Анимация CSS-градиента работает, только если текст не переносится

1 голос
/ 15 июня 2019

Этот пример анимации градиента в чисто CSS прекрасно работает , когда текст или объект не переносятся, как текст в конце строки .Но когда происходит обтекание, градиент нарушается и не анимируется.Вот немного измененный пример для демонстрации.Сожмите экран, чтобы вы могли видеть второй блок текста, обернутый вокруг края, наведите на него курсор и заметите, что он не анимируется. 

.button {
  background-size: 100%;
  background-image: linear-gradient(#fff, #ccc);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  font-size: 1.25rem;
  font-weight: 300;
  position: relative;
}
  
.button:before {
  border-radius: inherit;
  background-image: linear-gradient(#ccc, #fff);
  content: '';    
  display: block;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  width: 100%;
  z-index: 100;
  transition: opacity 0.45s;
}

.button:hover:before {
  opacity: 1;
}
<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around

Интересно, есть ли способ заставить это работать без использования JS.

1 Ответ

1 голос
/ 15 июня 2019

Вы можете получить аналогичный эффект, используя градиент с большей, чем высота области отображения, и анимируя его положение: 

.button {
  background-size: 100% 150%;
  background-position: 0 0;
  background-image: linear-gradient(#fff 0, #ccc 50%, #fff 100%);
  border-radius: 0.45rem;
  border: 1px solid #ddd;
  cursor: pointer;
  color: #333;
  font-size: 1.25rem;
  font-weight: 300;
  position: relative;
  transition: background-position 0.45s;
}

.button:hover {
  background-position: 0 100%;
}
<span class='button'>hello</span> i am some text and then <span class='button'>i wrap around the edges</span> and go all the way around
...