写了个有意思的打字机效果（HTML+CSS+JS）

打字机

最近在做企业官网，写了个挺有意思的效果，很符合这家科技公司的内容方向。

因为以前有看到过TX用过类似的，于是想自己做一个，结果当然是很成功啦！

就像自己在打字一样，哈哈~

B格满满，如果是你会愿意在这个页面多停留几秒吗？

---

下面附上代码（拿了说一声，别不声不响哦）

HTML

<h2>泰科智能 </h2>
<h2 class="container"></h2>
<h2 class="delete"></h2>

CSS

.daziji{
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: relative;
    font-size: 50px;
    letter-spacing: .2em;
   
}
.daziji h2{
    margin: 50px 0 20px;
    color: #fff;display: initial;
}
.container{
    margin-right: 5px;
}
.delete{
    border-right: 2px solid #fff;
    /*step-end是动画过渡效果，设置step-end代表不过渡*/
    animation: blingbling 1s step-end infinite;
}
@keyframes blingbling{
    from,to{
        border-color: transparent;
    }
    50%{
        border-color: #fff;
    }
}

JavaScript

const data = ["协手未来！","开启自动化新时代","构建更智能的世界","轻巧智动 协作无间"];
//打字机文字 英文","分隔
const container = document.getElementsByClassName('container')[0];
const Delete = document.getElementsByClassName('delete')[0];
//data数组的下标
let index = 0;
//data数组每一项字符串的下标
let strIndex = 0;
//开始的时间或是上一刻的时间
let start = null;
//上次操作与现在的时间间隔
let interval = 0;
//每次变化的间隔
let change = 500;
//现在是否是删除状态
let isDelete = false;
//根据requestAnimationFrame定义，这是一个回调函数，这个函数会
//传入一个参数，用来表示执行回调函数的时刻
function blink(time){
    //这个方法必须在函数内部再调用一次才会无限循环调用
    window.requestAnimationFrame(blink);
    //如果不存在开始的时间，说明是第一次进入函数
    if(!start){
        start = time;
    }
    //计算现在与上次操作差了多久
    interval = time - start;
      //如果大于间隔时间，则应该执行新的操作
    if(interval > change){
          //取出数组的某一个字符串
        let str = data[index];
        //不在删除状态
        if(!isDelete){
            //change是时间间隔，使用随机数，模仿不同的打字时间
            change = 500 - Math.random()*400;
            container.innerHTML = str.slice(0,++strIndex);
           
        }
        else{
            container.innerHTML = str.slice(0,strIndex--);
        }
        //当前进行了操作，需要保存当前的时间
        start = time;
        //对字符串进行判断，全部打印后则删除
        if(strIndex == str.length){
            isDelete = true;
            change = 200;
            start = time + 1200;
        }
        //删除后打印下一个
        if(strIndex <0){
            isDelete = false;
            start = time + 200;
            index++;
            
        }
        if(index == data.length){
            index = 0;
        }
    }
}

window.requestAnimationFrame(blink);

部分素材来源于网络，如有侵权请联系删除！

© 版权声明：本文为奇异纬度的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

写了个有意思的打字机效果（HTML+CSS+JS） - 原文链接：https://blog.isww.cn/1430.html