具有兩個一致單詞的多行打字機效果

Question

我正在嘗試創建一個打字機效果，該效果在語句結尾處暫停，刪除每個語句的大部分內容，但保留前兩個單詞，最后僅用這兩個單詞結束。

我發現一些事情幾乎可以滿足我的需求，但不能完全滿足我的需求。 我找到了刪除整個行並寫一個新行的版本，但是在開始時我需要兩個一致的詞。

例如（但不是實際文本）：

This is Stack Overflow. [延遲后刪除“堆棧溢出”]
This is JavaScript. [延遲后刪除“ JavaScript”]
This is what I want. [延遲后刪除“我想要的”，並以“這是”和連續閃爍的句號結束。

在理想情況下，句號將充當光標，而不是通常的水平線。

Answer 1

解決方案1：jQuery和Typed

使用jQuery和Typed，您可以執行以下操作：

$(".element").typed({strings: [
    "I am a ^100Linux fan.^1000", 
    "I am an ^200UX expert.^2000", 
    "I am a ^200programmer.^1000", 
    "I am a ^200web developer.^500"
  ],
  typeSpeed: 20,
  callback: function(){ $(".typed-cursor").css('visibility','hidden');}
});

https://mattboldt.com/demos/typed-js/

您可以免費使用此軟件。 它具有MIT許可證 。

重要說明這是一個簡單的解決方案，需要一個龐大的庫（jQuery）並且可訪問性較差。 不太適合生產，但是是一種以快速而骯臟的方式將某些東西放在一起的好方法。 如果您認真使用此效果，我將在下面提供僅CSS的解決方案。

---

解決方案2：僅CSS

使用CSS，您可以執行以下操作： https : //css-tricks.com/snippets/css/typewriter-effect/ 。 但是，我寧願在這樣的狀態下使用CSS動畫，因此它不依賴於等寬字體：

 @keyframes words { 0% {content: "I";} 17% {content: "I ";} 34% {content: "I a";} 50% {content: "I am";} 67% {content: "I am ";} 84% {content: "I am a";} 100% {content: "I am a ";} } @keyframes changeLetter { 0% {content: "";} 5% {content: "C";} 10% {content: "CS";} 15% {content: "CSS";} 20% {content: "CSS ";} 25% {content: "CSS f";} 30% {content: "CSS fa";} 35% {content: "CSS fan";} 40% {content: "CSS fan.";} 54% {content: "CSS fan.";} 55% {content: "CSS fan";} 56% {content: "CSS fa";} 57% {content: "CSS f";} 58% {content: "CSS f";} 59% {content: "CSS ";} 60% {content: "CSS";} 61% {content: "CS";} 62% {content: "C";} 62% {content: "";} 75% {content: "n";} 80% {content: "ne";} 85% {content: "ner";} 90% {content: "nerd";} 95% {content: "nerd.";} 100% {content: "nerd.";} } @keyframes cursor { 0% {content: "";} 50% {content: "|";} 100% {content: "";} } .words::before { animation: words 1s linear 0s 1 normal forwards; content: ""; } .letter-changer::before { animation: changeLetter 3s linear 1s 1 normal forwards; content: ""; } .letter-changer::after { animation: cursor 0.6s linear 2.2s 1 normal forwards, cursor 0.6s linear 4s 3 normal forwards; content: "|"; } .accessibility { width: 0; display: inline-block; overflow: hidden; white-space:nowrap; } 

 <span class="words"></span><span class="letter-changer"></span><span class="accessibility">I am a <s>CSS fan.</s>nerd.</span> 

我向::after元素添加了一個閃爍的光標。 我從以下網址獲得了該解決方案的靈感： https : //css-tricks.com/animating-the-content-property/ 。

重要說明：此解決方案不會通過加載100kb jQuery來迫使您將頁面大小加倍。 屏幕閱讀器和搜索引擎可以訪問它。 它適用於所有字體。 最后...效果將在任何現代瀏覽器上運行，甚至是沒有javascript（或禁用javascript）的瀏覽器。

Answer 2

最好的庫： https : //typeitjs.com/但是如果您需要這樣的幫助，請提供代碼