循环 CSS 打字机效果和更改文本

Question

我需要遍历 CSS 打字机效果，并更改每个循环的文本。 这是我用于打字机效果的代码。 我猜我需要使用 javascript，但我不知道如何去做。 关于我如何做到这一点的任何想法？

 .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } body { background: #333; color: #fff; font-family: monospace; padding-top: 5em; display: flex; justify-content: center; } /* DEMO-SPECIFIC STYLES */ .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } /* The typing effect */ @keyframes typing { from { width: 0 } to { width: 100% } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: blue; } }

 <div class="typewriter"> <h1>The cat and the hat.</h1> </div>

}

Answer 1

是的，您将需要一些脚本，至少可以检测动画的结束。 然后要刷新 html 内容，您可以将所有要显示的消息存储在一个数组中并循环遍历它。 然后你必须调整速度，这取决于显示的文本的长度。

 var messages=["message1","message2 message2 message2","message3 message3"]; var rank=0; // Code for Chrome, Safari and Opera document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt); // Standard syntax document.getElementById("myTypewriter").addEventListener("animationend", changeTxt); function changeTxt(e){ _h1 = this.getElementsByTagName("h1")[0]; _h1.style.webkitAnimation = 'none'; // set element animation to none setTimeout(function() { // you surely want a delay before the next message appears _h1.innerHTML=messages[rank]; var speed =3.5*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length _h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation (rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message }, 1000); }

 .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } body { background: #333; color: #fff; font-family: monospace; padding-top: 5em; display: flex; justify-content: center; } /* The typing effect */ @keyframes typing { from { width: 0 } to { width: 100% } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: blue; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="typewriter" id="myTypewriter"> <h1>The cat and the hat.</h1> </div>

还要检查不同的语法https://www.w3schools.com/jsref/prop_style_animation.asp

Answer 2

这可以通过 jQuery（或 JavaSript，如果您愿意）来完成。 只需等待动画完成，然后替换包含的 HTML。

 setTimeout(function () { $(".typewriter").html("<h1>This is a really cool string</h1>") },3500);

 .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } body { background: #333; color: #fff; font-family: monospace; padding-top: 5em; display: flex; justify-content: center; } /* DEMO-SPECIFIC STYLES */ .typewriter h1 { overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; } /* The typing effect */ @keyframes typing { from { width: 0 } to { width: 100% } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: blue; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="typewriter"> <h1>The cat and the hat.</h1> </div>

Answer 3

您不需要为此使用 javascript。

别被骗了。 这只能使用 CSS 完成，请参阅： https : //stackoverflow.com/a/57887588/2397550以获取工作示例。 您可以将 CSS 动画拆分为几个单独的动画，并使用animation-delay依次执行它们。

您的解决方案的一个（另一个）缺点是它需要等宽字体，这是我不希望有的限制。