标签：fun 传说 round border document image ges inf nat
打字机动画是一个很常见的动画效果，实现的方式也有很多
最近在项目中刚好遇到了类似的需求，整理了几个实现动画的方法，分享一下~
方法一、
效果最好的打字机动画
通过 js 的定时器增减文字，单独用一个标签来写光标动画，这样即使文字换行也能良好呈现
HTML
<div class="typing"> <span class="typing-text">这是一个传说中的打字动画</span> <i class="caret"></i> </div>
CSS
.caret::after {
content: "";
display: inline-block;
width: 2px;
height: 1em;
margin-bottom: -2px;
margin-left: -2px;
background-color: #333;
animation: blink-caret .5s step-end infinite;
}
@keyframes blink-caret { 50% {opacity: 0;} }
JS
var box = document.getElementsByClassName(‘typing-text‘)[0];
var str = box.innerText;
var i = 0;
box.innerText = ‘‘;
var typing = setInterval(function() {
box.innerText += str[i++];
i >= str.length && clearInterval(typing);
}, 200);
方法二、
在网上找的方法，纯 CSS3 做的动画
通过限定宽度配合 overflow:hidden 来实现文字添加的效果，使用 border 做光标
<style type="text/css">
.typing {
border-right: .1em solid;
width: 9em; /*宽度为“字数 + em”*/
white-space: nowrap;
overflow: hidden;
animation: typing 5s steps(9, end), /*步数为字数*/
blink-caret .5s step-end infinite alternate;
}
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
</style>
<div class="typing">这是一个打字机动画</div>
这种办法的优点就是不用写 js，但有很多的局限性：
比如文字不能自动换行，元素宽度还需要手动设置
当文字是英文的时候，必须使用 Consolas 之类的等宽字体
标签：fun 传说 round border document image ges inf nat
原文地址：http://www.cnblogs.com/goodbeypeterpan/p/7975970.html
