前言
在 web 应用中，模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用。
纯 css 实现
最简单的方式是莫过于直接使用 CSS 。大概思路是借助 CSS3 的 @keyframe 动画来不断改变包含文字的容器的宽度，超出容器部分的文字隐藏不展示。
<style> .typing {font-size: 20px;/* 初始宽度为0 */width: 0;height: 30px;border-right: 1px solid darkgray;animation: write 4s steps(14) forwards,blink 0.5s steps(1) infinite;overflow: hidden;}@keyframes write {0% {width: 0;}100% {width: 240px;}}@keyframes blink {50% {/* transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。 */border-color: transparent; /* #00000000 */}} </style>
<body><div class="typing">自在，轻盈，我本不想停留</div>
</body>
Steps(<number_of_steps>，<direction>)
animation steps 可以让动画断断续续，而非连续执行。接收两个参数：
第一个参数指定动画分割的段数；
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
可以看到其实现原理很简单，打字效果其实就是改变容器的宽度实现的。 初始文字是全部在页面上的，只是容器的宽度为 0，设置文字超出部分隐藏，然后不断改变容器的宽度； 设置 border-right，并在关键帧上改变 border-color 为 transparent，右边框就像闪烁的光标了。
优点是简单，缺点也是有的，首先我们要先获得文本的宽度，上面的截图就是因为宽度写错了，导致光标在文字后面，然后只支持 1 行。若想要支持多行，就得使用 JavaScript 了。
js 实现
setInterval 实现
<style> /* 产生光标闪烁的效果 */#content::after{content: '|';color:#000;animation: blink 1s infinite;}@keyframes blink{from{opacity: 0;}to{opacity: 1;}} </style>
<div id='content'></d
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
