html - 使用CSS控制打字动画中的光标位置

因此，我实现了使用CSS动画输入我的名字的方法。这个想法是要产生一种打字效果，一旦完成打字，光标就会停留在句子的结尾。

但是，在我的情况下，光标上升到屏幕的末端并在那里等待，我不希望这样。

我已引用此tutorial来实现键入效果。如您在本教程中所看到的那样，该句子完成后，光标会停在该位置，并且不会运行到屏幕结尾。

我的CSS代码段相同：

.titles {
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
}

h1 {
  font-size: 4.5em;
  color: white;
  font-family: 'Droid Sans', serif;
  letter-spacing: 2px;
  pointer-events: none;
  font-weight: 500;
  border: 0px;
  margin: 0px;
  text-align: center;
  /*color: #7a9fd0;*/
  color: #595959;
}

.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: 2px; /* Adjust as needed */
  animation:
    typing 4s steps(30, end),
    blink-caret .75s /*step-end*/steps(50, end) infinite;
}

/* The typing effect */
@-webkit-keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

相应的index.html代码段：

<div class="typewriter">
      <h1> Hi! I'm Abhijit Nathwani </h1>
    </div>

该页面位于http://abhijitnathwani.github.io

您还可以在我的GitHub Repo here上查看更多源代码。

最佳答案

 .typewriter h1{
   overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 2px;
    animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}

.typewriter {
    display: inline-flex;
}

因此，这显然是打字机宽度的问题。为了使其适合我设置的内容display: inline-flex。这使整个div变小了，所以我不得不重新调整作家的速度。它仍然不是完美的，但我会让您使用它以使其正确安装。

如果要使打字机居中，可以将其包装在另一个div中并将其设置为text-align: center。

关于html - 使用CSS控制打字动画中的光标位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44719201/