効果（最後のソースコード）：
成し遂げる：
1.ラベルを定義すると、テキストはspanタグに書き込まれ、テキストは最初にjs配列に格納されます。
<h1>
<span class="text" ></span>
</h1>
2.テキストの基本的なスタイルを定義します。
.text{
font-family: 'fangsong';
display: inline-block;
position: relative;
font-size: 40px;
height: 60px;
line-height: 60px;
color: rgb(245, 245, 245);
}
表示：インラインブロック;インラインブロック要素の
位置：相対;相対位置
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;
}
}
位置：絶対;
右：-10px;
上：5px;絶対測位
アニメーション：san 0.5ssteps （1）無限;アニメーション;
透明透明色
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
完全なソースコード：
<!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 +
cssNetEaseクラウド公式ウェブサイトカルーセル画像を模倣html + css + js
水波ローディングアニメーションhtml + css
ナビゲーションバースクロールグラデーション効果html + css + js
ブックページめくりhtml + css3D
ステレオアルバムhtml + css
ネオン描画ボード効果html + css + js
いくつかのCSS属性の要約を覚えておいてください（1）
Sass要約メモ
...など