HTML/CSS : 如何在这个动画文本中的最后一个字母后停止光标？

Question

我尝试使用 html 和 css 为一些文本添加动画效果。目前，我有这个：

<div id="rectangle"></div>
<p>Hello world</p>

body {
  margin:0
}
#rectangle{
    position: absolue;
    width:100%;
    height:100px;
    background:#1D2024;
}

p {
  margin-top: -60px;
  margin-left: 30%;
  border-right: solid 3px rgba(87, 203, 204,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: #57CBCC;
}

/* Animation */
p {
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 472px;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(87, 203, 204,.75);}
  to{border-right-color: transparent;}
}

codepen 在这里：https://codepen.io/aakhya/pen/EOxqOV

为什么光标停在“d”之后这么远的地方？有人可以告诉我如何在 d 之后停止光标吗？

非常感谢

Answer 1

光标在字母 d 之后停止这么远的原因是因为这些代码行：

@keyframes animated-text{
  from{width: 0;}
  to{width: 472px;}
}

代码中写着“to{width: 472px;}”的意思是光标开始后会从472px开始。

要解决此问题，您可以编辑宽度，使其在 d 之后停止。

您可能正在寻找的当前动画的潜在替代品如下：

  @keyframes typing {
    0% {
      width: 0
    }
  }
 
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }

如果您将其放入您的代码中，连同：

animation: typing 2s steps(11), blink .5s infinite alternate;

（当然，根据您的需要对其进行编辑），并为您的 p 标签添加一个宽度，一旦您通过实验找出宽度，它就会为您提供完成您需要的动画。

如果要一次出现一个字母，只需让步数等于字符数即可。

通过实验，本例中“Hello World”的宽度约为185px，需要11步。如果你想让它出现得更快，你可以编辑动画中的秒数。

p {
  width: 185px;
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: rgba(255,255,255,.70);
}

/* Animation */
p {
animation: typing 2s steps(11), blink .5s infinite alternate;
}

/* text animation */

@keyframes typing{
  0%{
    width: 0
  }
}

/* cursor animations */

 @keyframes blink{
    50% {
      border-color: transparent
    }
  }

HTML/CSS : 如何在这个动画文本中的最后一个字母后停止光标？

HTML/CSS : How to stop the cursor after the last letter in this animated text?

html

css

animation

text