打字机动画删除字母的某些部分答案

【问题标题】：Typewriter animation deleting some part of letter打字机动画删除字母的某些部分
【发布时间】：2020-05-09 20:08:13
【问题描述】：

我使用下面的代码来显示打字机动画效果（来源https://codepen.io/thiagoteles/pen/ogoxLw）。为了更清晰的结果，我已将所有内容设置为慢速。一切正常，但一个一个出现的每个字母并不完全可见，因为它右侧的光标总是会擦除它的一部分。有没有办法用纯css解决这个问题，还是我必须使用javascript？谢谢

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
html{
  min-height: 100%;
  overflow: hidden;
}
body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family:'Anonymous Pro' ,monospace ;  
  background-color: black;  
}
.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 4px solid green;
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 100s steps(44) 1s 1 normal both,
             blinkTextCursor 1000ms steps(544) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: green;}
  to{border-right-color: transparent;}
}

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    </head>
    <body>
    <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
    </body>
    </html>

【问题讨论】：

标签： css css-animations

【解决方案1】：

当使用 monspace 字体时，您需要考虑 ch 来定义宽度，因为 1ch 是 1 个字符的宽度。同时调整你的步数添加start

/* Google Fonts */

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */

html {
  min-height: 100%;
  overflow: hidden;
}

body {
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255, 255, 255, .75);
  font-family: 'Anonymous Pro' ,monospace;
  background-color: black;
}

.line-1 {
  position: relative;
  top: 50%;
  margin: 0 auto;
  width: 0;
  border-right: 4px solid green;
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
}


/* Animation */

.anim-typewriter {
  animation: 
   typewriter 45s steps(44,start) 1s forwards, 
   blinkTextCursor 0.3s steps(15) infinite;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 44ch;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: green;
  }
  to {
    border-right-color: transparent;
  }
}

  &lt;p class="line-1 anim-typewriter"&gt;Animation typewriter style using css steps()&lt;/p&gt;

【讨论】：