如何移除CSS实现的打字机文本动画中的闪烁光标

你代码里的光标由两部分逻辑实现：绘制光标样式的橙色渐变，以及控制光标闪烁的b动画，按以下步骤修改即可移除光标：

• 移除 .type 选择器中 animation 属性里的 b .1s infinite steps(1) 配置项
• 移除 .type 选择器中 background 属性里的第一个渐变参数 linear-gradient(-90deg, #F3933F 5px, #0000 0) 10px 0 ,，仅保留后续文字填充渐变
• 已无作用的 @keyframes b 规则可以直接删除

修改后可用的完整代码如下：

body {
  background  :#3d6485;
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 36px;
}
.type {
  --n                     : 56;
  color                   : #000;
  opacity                 : 0;
  background              : linear-gradient(#F3933F 0 0) 0 0;
  background-size         : calc( var(--n) * 1ch ) 200%;
  -webkit-background-clip : text;
  background-clip         : text;
  background-repeat       : no-repeat;
  animation               : d 2s forwards
                          , t calc( var(--n) * .1s ) steps( var(--n) ) forwards;
  animation-delay         : 2s;
}
@keyframes d {
  from { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes t {
  from { background-size: 0 200%; }
}

<p class="lol">
  <span class="type">
    Hello world
  </span>
</p>

内容的提问来源于stack exchange，提问作者Psyche P