码迷,mamicode.com
首页 > 其他好文 > 详细

实现【打字机动画】的两种办法

时间:2017-12-04 11:47:26      阅读:174      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!