Html 当文字结束时，如何使文字上的垂直线消失

当用户进入网站时，我使用此代码使文本看起来像是在编写

我想在完成时继续显示书写的动画，也就是说，当a想要隐藏垂直线（光标）时

body{背景：蓝色；}
.线路{
宽度：4；
最高：50%；
保证金：自动；
右边框：2倍实心rgba（255、255、255、0.75）；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
转化：translateY（-50%）；
}
.动画打字机{
动画：打字机3步（40）1步正常，
闪烁或500毫秒步长（40）无限法向；
}
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
@介质（最大宽度：768px）{
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
}
@关键帧闪烁器{
从{
右边框颜色：rgba（255、255、255、0.75）；
}
到{
右边框颜色：透明；
}
}

---

您的最佳自动化

如果您可以（想要）使用javascript，您没有指定，但是您可以为

动画结束设置事件侦听器

，并让垂直线在触发时消失（或者先停止动画并添加漂亮的淡出效果）

const typewriter=document.querySelector（“.anim typewriter”）；
控制台日志（打字机）
打字机.addEventListener（“动画结束”，函数（）{
setInterval（函数（）{
typewriter.style.border=“0px”；
}, 600);
}，假）
正文{
背景：蓝色；
}
.线路{
宽度：4；
最高：50%；
保证金：自动；
右边框：2倍实心rgba（255、255、255、0.75）；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
转化：translateY（-50%）；
}
.动画打字机{
动画：打字机3s步（40）1s 1均正常，闪烁文本或500ms步（40）无限正常；
}
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
@介质（最大宽度：768px）{
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
}
@关键帧闪烁器{
从{
右边框颜色：rgba（255、255、255、0.75）；
}
到{
右边框颜色：透明；
}
}
你最好的自动化
如果你让闪烁的光标运行的时间比文本“显示”的时间稍微长一点，并且给它
动画填充模式：向前
，当它完成时，它将粘在从动画结束处收集的
不透明度：0
上


body{背景：蓝色；}
.线路{
宽度：4；
最高：50%；
保证金：自动；
右边框：2倍实心rgba（255、255、255、0.75）；
文本对齐：居中；
空白：nowrap；
溢出：隐藏；
转化：translateY（-50%）；
}
.动画打字机{
动画：打字机3步（40）1步正常，
向前眨眼或500毫秒步数（40）4秒；
}
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
@介质（最大宽度：768px）{
@关键帧打字机{
从{
宽度：0；
}
到{
宽度：9em；
}
}
}
@关键帧闪烁器{
从{
右边框颜色：rgba（255、255、255、0.75）；
}
到{
右边框颜色：透明；
}
}
*我想在第一部分完成后继续展示写作动画，这就是为什么a想隐藏垂直线*
您最好的自动化