效果最好的打字机动画
通过 js 的定时器增减文字,单独用一个标签来写光标动画,这样即使文字换行也能良好呈现
HTML
这是一个传说中的打字动画
CSS
{:;:;:;:;:;:;:;:;
}{:;}
JS
box = document.getElementsByClassName()[ str = i = = typing =+= str[i++>= str.length &&);
在网上找的方法,纯 CSS3 做的动画
通过限定宽度配合 overflow:hidden 来实现文字添加的效果,使用 border 做光标
blink-caret .5s step-end infinite alternate
<span style="color: #0000ff;"><
<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="typing"<span style="color: #0000ff;">>这是一个打字机动画<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>这种办法的优点就是不用写 js,但有很多的局限性:
比如文字不能自动换行,元素宽度还需要手动设置
当文字是英文的时候,必须使用 Consolas 之类的等宽字体
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。