打字效果插件 typing.js
typeit
一个 JS 库,用来在网页上生成打字机输入文字的动画效果。
react 实现
import { useState } from 'react';
import { Button } from 'antd';
import { useInterval } from 'ahooks';
import styles from './index.less';
const timing = 250;
const typingList = '欢迎使用,食安校园;食者无忧,管着有方!欢迎使用,食安校园;食者无忧,管着有方!欢迎使用,食安校园;食者无忧,管着有方!'.split('');
export default function IndexPage() {
const [typingIdx, setTypingIdx] = useState(-1);
const [interval, setInterval] = useState<number | undefined>(undefined);
// 自动轮播
useInterval(() => {
setTypingIdx((prev) => {
if (prev >= typingList.length - 1) {
setInterval(undefined);
return prev;
}
return prev + 1;
});
}, interval);
const onTyping = () => {
setInterval(timing);
};
return (
<div className={styles.admin}>
<Button onClick={onTyping}>开始打字</Button>
<div className={styles.typingContent}>
{typingList.map((item, index) => (index <= typingIdx ? item : null))}
<span className={styles.cursor} />
</div>
</div>
);
}
无 JS 实现打字效果
转载:CSS 技巧 - Marko Denic
html 文件
<div class="wrapper">
<div class="typing-demo">This is a typing demo.</div>
</div>
css 文件
.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
50% {
border-color: transparent
}
}