实现类似于松弛主页的带下划线的打字效果

Question

我能够模仿与slack homepage类似的打字效果。它使用typed.js，我也使用了相同的。

但是如何实现下划线和感叹号效果呢？任何人都可以提供任何建议或教程/代码片段。感谢。

我的HTML：

<div class="message"></div>

和javascript：

$(function(){
      $(".message").typed({
        strings: ["This is the first line^1500", "This is the second line"],
        startDelay: 1500,
        typeSpeed: 30,
        backDelay: 500
      });
  });

PS：我是CSS的初学者

Answer 1

我玩了一下，在JSBin上写了一个小例子。按“Run with JS”查看它的实际效果。您也可以玩这个，只是尝试更改一些值！

http://jsbin.com/cihaxuzire/edit?html,css,output

SVG和CSS直接从松弛的网站上复制。

有一篇很棒的文章： https://css-tricks.com/svg-line-animation-works/

希望这有帮助。