具有两个一致单词的多行打字机效果

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/但是如果您需要这样的帮助，请提供代码