Question

这是我的代码：

<!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）文本将整体过渡，所有行从左到右同时显示

感谢您的帮助！

Answer 1

只需删除white-space: nowrap;样式的a.nice-link:after。

在这里测试。https://jsfiddle.net/nimittshah/aqd6ev39/1/

如何将CSS文字动画扩展到多行？

1 个答案: