原生js实现打字动画效果代码-html代码-BFW代码库

原生js实现打字动画效果代码

代码语言：html

所属分类：动画

代码描述：原生js实现打字动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background-color:#ce3635;
          text-align: center;
          color:#fff;
          padding-top:10em;
        }
        
        * { color:#fff; text-decoration: none;}
    </style>



</head>

<body>
    <h1>
        <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
            <span class="wrap"></span>
        </a>
    </h1>

    <script>
        var TxtType = function(el, toRotate, period) {
                this.toRotate = toRotate;
                this.el = el;
                this.loopNum = 0;
                this.period = parseInt(period, 10) || 2000;
                this.txt = '';
                this.tick();
                this.isDeleting = false;
            };
        
            TxtType.prototype.tick = function() {
                var i = this.loopNum % this.toRotate.length;
                var fullTxt = this.toRotate[i];
        
                if (this.isDeleting) {
                this.txt = fullTxt.substring(0, this.txt.length - 1);
                } else {
                this.txt = fullTxt.substring(0, this.txt.length + 1);
                }
        
                this.el.innerHTML = '<span class="wr.........完整代码请登录后点击上方下载按钮下载查看