碼上掘金 | 簡單實現一個打字機動畫
theme: fancy
我正在參加 碼上掘金體驗活動，詳情：show出你的創意程式碼塊
前言
眾所周知，掘金是一個技(摸)術(魚)社群，我一直在沸點快樂的學(摸)習(魚)，那麼作為一個合格的沸人。不僅要掌握熟練的學(摸)習(魚)技術，掌握打字技術使我們必備技能之一。
所以，下面就讓我們簡單實現一個打字機來幫我們打字吧 。
程式碼塊
http://code.juejin.cn/pen/7092220950711631908
實現過程
預先準備
文字
然後打字機肯定是需要打字的，所以我們先來設定一下我們需要打的字
我們定義一個 text 文字
```
然後使用 `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;
}
``` 在文字動畫的每次字型動畫後 加入這個插入符的動畫，就最終得到了我們需要的效果
結語
這是由一個非常非常不專業的後端混子完成的，僅供大家一樂~
希望大家都可以在掘金快樂的學習(摸魚)~~