「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】。文章转载请联系作者。
评论