Как расширить анимацию текста CSS на много строк? - PullRequest
Новая
       11

Как расширить анимацию текста CSS на много строк?

0 голосов
/ 27 сентября 2018

Это мой код: 

<!DOCTYPE html>

<style> 
a.nice-link {
  position: relative;
  color: #71ad37;
}

a.nice-link:after {
  text-align: justify;
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #a5ff0e;
  min-height: 200%;
  height: 20%;
  width: 0;
  max-width: 200%;
  -moz-transition: .3s;
  -o-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
a.nice-link:hover {
  color: #71ad37;
}
a.nice-link:hover:after {
  width: 100%;
}

li {
display: inline-block;

}

.try{
width: 50px;
}
</style>

<div class = "try"><a class="nice-link" href=“http://katoliiklased.blogspot.com/2018/08/katekismuse-surmanuhtlust-kasitlev-uus.html“ data-text="Hello Bello Sello" target="_blank">Hello Bello Sello</a> 
</div>

Суть кода такова: если вы наведете указатель мыши на ссылку, переход будет работать, так что текст будет выделяться слева направо,

Работает нормально, если есть одна строка текста.Но если их больше, переход работает только на первой строке.

Как заставить его работать и на других линиях?Либо так, что 1) переход начинается с первой строки, а затем продолжается для других строк, либо 2) текст будет переходить как единое целое со всеми строками одновременно слева направо

Я ценю вашу помощь!

1 Ответ

0 голосов
/ 27 сентября 2018

Просто удалите white-space: nowrap; в a.nice-link:after стиле.

Проверьте это здесь .. https://jsfiddle.net/nimittshah/aqd6ev39/1/

...