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

Question

所以我已经实现了使用 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

Answer 1

 .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。