我想要在HTML或者CSS或者JS弄一个顺畅打字的动画。像是Office里的一样，
打字的时候光标后移
<!DOCTYPE html>
<html>
<head>
<title>打字动画</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 18em;
white-space: nowrap;
overflow: hidden;
border-right: 0.1em solid;
animation: aa 10s linear infinite,gb 10s linear infinite;
}
@keyframes aa{
0%{width: 0;}
}
@keyframes gb{
50%{border-color: transparent;}
100%{border-color: black;}
}
.b{
width: 18em;
white-space: nowrap;
overflow: hidden;
border-right: 0.1em solid;
animation: bb 10s steps(18) infinite,cc 10s steps(2) infinite;
}
@keyframes bb{
0%{width: 0;}
}
@keyframes cc{
50%{border-color: transparent;}
100%{border-color: black;}
}
</style>
</head>
<body>
<div class="a">平滑效果平滑效果平滑效果平滑效果</div>
<br />
<div class="b">跳动效果跳动效果跳动效果跳动效果</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="text">
</div>
</body>
<script>
let divTyping = document.getElementById('text')
let i = 0,
timer = 0,
str = '用JS实现动态打字效果'
function typing () {
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_'
timer = setTimeout(typing, 200)
}
else {
divTyping.innerHTML = str//结束打字,移除 _ 光标
clearTimeout(timer)
}
}
typing()
</script>
</html>
更多参考：https://blog.csdn.net/qq_37860930/article/details/80859473
有帮助麻烦点个采纳【本回答右上角】，谢谢~~
可以啊，给你推荐一个下载地址https://www.jb51.net/jiaoben/586953.html
打字具有彩色弹窗动态效果，如有帮助，请采纳一下，谢谢
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
str = "我想要在HTML或者CSS或者JS弄一个顺畅打字的动画。像是Office里的一样，打字的时候光标后移";
i = 0;
var myTimer = setInterval(function () {
$("#word").append(str[i]);
i++;
if(i==str.length)
clearInterval(myTimer);
},
100);
$("#word").focus();
});
</script>
</head>
<body>
<textarea rows="10" cols="50" id="word"></textarea>
</body>
</html>
很简单的一个打字效果。