三种代码实现打字动画效果 - Jdeal

为大家带来一篇打字效果动画的3种实现方法。博主觉得挺不错的，现在就分享给大家，也给大家做个参考，方便在博客中使用。

方法一：纯CSS

<h1 class="typing typing-item">打字动画打字动画打字动画</h1>

.typing{
 font-size: 1rem;
 padding-top: 6%;
 margin-bottom: 5%;
 font-weight: normal;
 letter-spacing: .3rem;
 -webkit-animation: type 2s steps(50, end) forwards;
 animation: type 2s steps(50, end) forwards;
}
.typing-item{
 text-align: center;
 color: black;
 width:100%;
 white-space:nowrap;
 overflow:hidden;
}
@-webkit-keyframes type{
 from { width: 0;}
}
 
@keyframes type{
 from { width: 0;}
}

缺点：只能实现一行式的打字效果，无法打出一段落文字。

方法二：Jquery

<div class="text-container">
 <span class="text-static"></span>
 <span class="text"></span>
 <span class="cursor">|</span>
</div>

<script type="text/javascript" src="/jquery.js"></script>
<script>
  $(function() {
   myPrint(["hello my word!"], 100);
   function myPrint(arr, speed) {
    var index = 0;
    var str = arr[index];
    var i = 0;
    var add = true;
    var mySetInterval = setInterval(function() {
     // 延时4个字符的时间
     if (i == str.length + 4) {
      add = false;
      // 如果是最后一个字符串则终止循环函数
      if (index + 1 >= arr.length) {
       clearInterval(mySetInterval);
      }
     } else if (i == -2) {
      // 删除后延时2个字符的时间
      add = true;
      str = arr[++index];
     }
     setTimeout(function() {
      if (add) {
       i++;
       $(".text").html(str.substring(0, i));
      } else {
       $(".text").html(str.substring(0, i - 1));
       i--;
      }
     })
    }, speed)
   }
  })
 </script>

方法三：原生JS

<div id="typing"></div>

<script>
 var str = '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容';
 var i = 0;
 function typing(){
  var divTyping = document.getElementById('typing');
  if (i <= str.length) {
   divTyping.innerHTML = str.slice(0, i++) + '_';
   setTimeout('typing()', 200);
  }
  else{
   divTyping.innerHTML = str;
  }
 }
 typing();
</script>

通过上面的代码发现，css的思路是利用width和overflow:hidden，动画让宽度变宽实现像打字的样式。js/jquery，都是先得到字的内容，然后再逐字往容器中添加文字，希望这篇文章能给大家一个参考思路。

如果本文对您有用的话，欢迎在下方留言评论哦~