[英]How to place blinking _ after TypeWriter effect in HTML/CSS/JavaScript
I am trying to output Hello World_ with the typewriter effect and leave the _ blinking.我正在尝试使用打字机效果 output Hello World_ 并让 _ 闪烁。 Currently, I'm using HTML and CSS to make the _ blink, and I am using Javascript to type out Hello World in the typewriter effect.
目前,我正在使用 HTML 和 CSS 使 _ 闪烁,我正在使用 Javascript 在打字机效果中输入 Hello World。 At the moment my code prints out the _ then Hello World.
目前我的代码打印出 _ 然后是 Hello World。 I have been having trouble getting it to look like Hello World_ with the underscore blinking still.
我一直很难让它看起来像 Hello World_ 下划线仍在闪烁。 Thank you!
谢谢!
<div id = "HelloWorld">
<h1 id = "demo">
<span class = "blink_me">_</span>
</h1>
</div>
<script>
var i = 0;
var txt = 'Hello World';
var speed = 150;
(function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
})();
</script>
.blink_me {
animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
So as you can see my output is _Hello World, but I'm trying to get Hello World_ with the _ blinking still.如您所见,我的 output 是 _Hello World,但我正在尝试获取 Hello World_,而 _ 仍在闪烁。 Thank you!
谢谢!
I will give two solutions.我将给出两个解决方案。
Use rule direction: rtl
to #demo
.使用规则
direction: rtl
到#demo
。 This rule will reverse your elements by swapping them.此规则将通过交换元素来反转您的元素。
Just add it to your css:只需将其添加到您的 css 中:
#demo {
display: inline-block;
direction: rtl;
}
var i = 0; var txt = "Hello World"; var speed = 150; (function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } })();
#demo { display: inline-block; direction: rtl; }.blink_me { animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }
<div id="HelloWorld"> <h1 id="demo"> <span class="blink_me">_</span> </h1> </div>
Create an additional span tag for animated text, specifying any class or id.为动画文本创建一个额外的 span 标签,指定任何 class 或 id。 Like this:
像这样:
<h1 id="demo">
<span class="text_out"></span>
<span class="blink_me">_</span>
</h1>
var i = 0; var txt = "Hello World"; var speed = 150; (function typeWriter() { if (i < txt.length) { document.getElementsByClassName("text_out")[0].innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } })();
.blink_me { animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }
<div id="HelloWorld"> <h1 id="demo"> <span class="text_out"></span> <span class="blink_me">_</span> </h1> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.