使用 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。

Answer 2

在检查器中进行了一些修改后，我终于找到了一种方法。

您必须将此添加到 h1

display: inline

将此添加到 .typewriter

text-align: center
display: inline-block;

在 .typewriter 周围添加 div，class 为 .center

并将其添加到其中

text-align: center;

我已经向您的 github 项目提出了拉取请求 here

代码如下所示：

.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 infinite;
}

.typewriter {
  text-align: center;
  display: inline-block;
}

.center {
  text-align: center;
}

您不需要重新调整任何东西。

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

Controlling the cursor position in the typing animation using CSS

html

css

animation

typing

effect