實現帶下劃線的打字效果類似於鬆弛的主頁

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。按下「用JS運行」即可看到它在運行。你也可以玩這個，只是嘗試改變一些值！

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

SVG和CSS直接從鬆弛網站複製。

有一個關於一個偉大的文章： https://css-tricks.com/svg-line-animation-works/

希望這有助於。