循環 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依次執行它們。

您的解決方案的一個（另一個）缺點是它需要等寬字體，這是我不希望有的限制。