「CSS 畅想」自动打字效果，默写首诗来读读
前言
想到之前做过打字功能，虽说不是一个复杂的功能，但是确实是一个好玩的效果，新平台配上好玩的功能，想想还有那么点妙呢。
不过之前的功能是打一行字，文字内容由一两句话交替出现。突然想起了诗词大会上介绍某首诗的时候，用的逐字逐句出现的展现方式。打字功能也实现这种方式，这个效果有点好玩。
setTimeout 才是“真绝色”
每一个我们能看到的展示或者动效，可能都有很多实现方式，这是也是技术魅力的所在，可以让人不断探索新的实现方式。
但是，说到自动打字，我首先想到的还是定时功能。100 毫秒的间隔出现 1 个字，进而呈现出来逐字逐句的动态效果。
何不来首《侠客行》
侠客行是我很喜欢的唐朝诗仙李白的一首诗。
功能实现
html
页面展示很简介，分为两大块，标题和诗文内容；
诗文内容部分分为三个块，诗文的标题、诗文的作者、诗文的内容；每个部分添加唯一的 id 值。
css
诗文内容的外边框样式设置，添加了 box-shadow 属性，边框添加阴影效果是比较常见的方式，增添了视觉上的靓丽效果；
诗文内容的换行样式设置，这次是通过设置容器内侧的填充距离，保持诗文的换行效果的展示。
js
诗文内容，定义为数组对象，数组主要包括诗文的标题、作者、内容三个元素；
使用 setTimeout 函数设置定时任务，进行数组对象的循环，展示每个部分的每个文字；
数组每个元素完成展示之后，使用 clearTimeout 清除定时，释放定时器。
效果展示
在线预览平台查看动画效果。
https://code.juejin.cn/pen/7087076577485275166
总结
虽然是基础版的前端打字效果。
但是偶尔来点这种小效果，为生活增添的小乐趣，甚好。
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/76903212338dfe4c8839fa818】。文章转载请联系作者。
掘金优秀创作者 2022-09-01 加入
非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
评论