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

Question

所以我已经实现了使用 CSS 动画输入我的名字。这样做的目的是在完成输入后使光标停留在句子的末尾，从而产生打字效果。

但是，就我而言，光标会上升到屏幕的末尾并在那里等待，我不希望这样。

我已经参考了这个tutorial 来实现打字效果。正如您在教程中看到的那样，光标在句子完成后停止，并且不会运行到屏幕末尾。

我的 CSS sn-p 也是一样的：

.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 sn-p：

<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 更小，所以我不得不重新调整 writer 的速度。它仍然不完美，但我会让你玩它以正确适应它。

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

Answer 2

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

您必须将此添加到h1

display: inline

将此添加到.typewriter

text-align: center
display: inline-block;

在.typewriter 周围添加一个div，类为.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;
}

您不必重新调整任何东西。