前言
众所周知，掘金是一个技(摸)术(鱼)社区，我一直在沸点快乐的学(摸)习(鱼)，那么作为一个合格的沸人。不仅要掌握熟练的学(摸)习(鱼)技术，掌握打字技术使我们必备技能之一。
所以，下面就让我们简单实现一个打字机来帮我们打字吧 。
代码块
https://code.juejin.cn/pen/7092220950711631908
实现过程
预先准备
文字
然后打字机肯定是需要打字的，所以我们先来设定一下我们需要打的字
我们定义一个 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; }
在文本动画的每次字体动画后 加入这个插入符的动画，就最终得到了我们需要的效果
网络异常，图片无法展示
|
结语
这是由一个非常非常不专业的后端混子完成的，仅供大家一乐~
希望大家都可以在掘金快乐的学习(摸鱼)~~
