HTML实现打字机效果

HTML打字机效果是一种在网页上模拟打字机打字效果的技术，通过在HTML中使用JavaScript和CSS实现。当用户访问网页时，文字会像打字机一样一个一个地出现，给人一种动态的视觉效果。这种效果可以增加网页的趣味性和吸引力，提高用户体验。

方法1

效果展示

具体操作

1.添加html代码

<h2>刘郎阁</h2>
<h2 class="container"></h2>
<h2 class="delete"></h2>

2.引入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;
    }
}

3.引入Js代码

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);

方法2

使用type.js模拟打字输入回退效果

效果展示

效果1：

效果2：

具体操作

1.添加html代码

<div style="text-align:center;font-size:2rem;">
<strong id="typed3"></strong>

</div>
<script data-pjax>
  try {
    var typed3 = new Typed("#typed3", {
    strings: ['我想说：我','我想说：爱','我想说：你'],//字符串
    startDelay: 0,//开始的延迟
    typeSpeed: 200,//打字速度
    backSpeed: 100,//回退速度
    loop: true,//是否循环
    showCursor: true,//显示游标
    smartBackspace: true, //默认true
    });
  } catch (err) {
  }
</script>

2.引入Js

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.min.js"></script>

3.根据你自己的实际情况进行微调即可实现！

完！