效果（最后有源码）：
实现：
1. 定义标签，文本将写在span标签里，文本先在js的数组存着：
<h1><span class="text" ></span></h1>
2. 定义text基本样式：
.text{font-family: 'fangsong';display: inline-block;position: relative;font-size: 40px;height: 60px;line-height: 60px;color: rgb(245, 245, 245);}
display: inline-block; 行内块元素
position: relative; 相对定位
3. 制作文本最后的小光标：
.text::after{content: '';position: absolute;right: -10px;top: 5px;height: 50px;width: 3px;background-color: #fff;animation: san 0.5s steps(1) infinite;}@keyframes san{0%,100%{background-color: #fff;}50%{background-color: transparent;}}
position: absolute;
right: -10px;
top: 5px; 绝对定位
animation: san 0.5s steps(1) infinite; 动画；
transparent 透明色
4. js部分，实现效果：
<script><!-- 获取.text标签 -->const text = document.querySelector('.text');<!-- 定义数组，里面放上文本 -->const txt =["北极光之夜。","夜越黑，星星越亮。","答案在风中飘荡。"]; <!-- 定义当前要显示的字符串的第几个字符 -->var index=0;<!-- 定义文本数组的下标 -->var xiaBiao= 0;<!-- 定义huan，拿来判断是要实现打字还是删除字效果，初始为真 -->var huan = true;<!-- 定义一个定时器，200毫秒执行一次 -->setInterval(function(){<!-- huan为真 -->if(huan){<!-- 给.text标签添加字符，用.slice方法 --> text.innerHTML = txt[xiaBiao].slice(0,++index);}else{<!-- 给.text标签删除字符，用.slice方法 --> text.innerHTML = txt[xiaBiao].slice(0,index--);}<!-- 判断当前index是否为当前字符串长度了+3了 ，+3是为了打完后多等会，多走3个啥也不做的轮回-->if(index==txt[xiaBiao].length+3){<!-- huan变为假，开始执行删除文字效果 -->huan = false;}<!-- 如果删完了 -->else if(index<0){<!-- index=0，huan为真，从头开始打字 -->index = 0;huan = true;<!-- 数组下标加1 -->xiaBiao++;if(xiaBiao>=txt.length){<!-- 如果数组下标超过了，又回到0 -->xiaBiao=0; }}},200)</script
JavaScript slice() 方法
完整源码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: rgb(43, 52, 82);}.text{font-family: 'fangsong';display: inline-block;position: relative;font-size: 40px;height: 60px;line-height: 60px;color: rgb(245, 245, 245);}.text::after{content: '';position: absolute;right: -10px;top: 5px;height: 50px;width: 3px;background-color: #fff;animation: san 0.5s steps(1) infinite;}@keyframes san{0%,100%{background-color: #fff;}50%{background-color: transparent;}}</style></head><body><h1><span class="text" ></span></h1><script>const text = document.querySelector('.text');const txt =["北极光之夜。","夜越黑，星星越亮。","答案在风中飘荡。"]; var index=0;var xiaBiao= 0;var huan = true;setInterval(function(){if(huan){text.innerHTML = txt[xiaBiao].slice(0,++index);console.log(index);}else{text.innerHTML = txt[xiaBiao].slice(0,index--);console.log(index);}if(index==txt[xiaBiao].length+3){huan = false;}else if(index<0){index = 0;huan = true;xiaBiao++;if(xiaBiao>=txt.length){xiaBiao=0; }}},200)</script></body></html>
总结：
大家知道有什么新出的游戏好玩吗，想玩点新游戏了。
其它文章：
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等
