我正在参加 码上掘金体验活动，详情：show出你的创意代码块
前言
众所周知，掘金是一个技(摸)术(鱼)社区，我一直在沸点快乐的学(摸)习(鱼)，那么作为一个合格的沸人。不仅要掌握熟练的学(摸)习(鱼)技术，掌握打字技术使我们必备技能之一。
所以，下面就让我们简单实现一个打字机来帮我们打字摸鱼吧 。
代码块
实现过程
预先准备
文字
然后打字机肯定是需要打字的，所以我们先来设定一下我们需要打的字
我们定义一个 text 文本
<body>
<div class="typewriter-effect">
<div class="text" id="typewriter-text">
</div>
</div>
</body>
然后使用 js 来设置 text 内部的文本元素
const typeWriter = document.getElementById('typewriter-text');
const text = 'I love mofish in Juejin .';
typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);
--characters 为包含字符数的变量，用于文本的动画设置。
动画
打字机的动画其实分为两个部分
- 字 出现的动画
- 插入符 出现的动画
所以我们定义两个动画效果
typing字体出现动画
@keyframes typing {
75%,
100% {
max-width: calc(var(--characters) * 1ch);
}
}
blink插入符动画
@keyframes blink {
0%,
75%,
100% {
opacity: 1;
}
25% {
opacity: 0;
}
}
实现动画
文本动画实现
首先我们先只让文本实现一个依次出现的动画效果
.typewriter-effect > .text {
max-width: 0;
animation: typing 3s steps(var(--characters)) infinite;
white-space: nowrap;
overflow: hidden;
}
我们对文本添加动画，并根据需要使用white-space: nowrap和overflow: hidden使内容不可见
效果：
加入插入符动画 实现一个类似打字的效果
我们使用:after伪元素将插入符号添加到容器元素
.typewriter-effect:after {
content: " |";
animation: blink 1s infinite;
animation-timing-function: step-end;
}
在文本动画的每次字体动画后 加入这个插入符的动画，就最终得到了我们需要的效果
结语
这是由一个非常非常不专业的后端混子完成的，仅供大家一乐~
希望大家都可以在掘金快乐的学习(摸鱼)~~
