字一个个出现效果_html 文字一个个出来的-CSDN博客

本文链接：https://blog.csdn.net/qq_61128752/article/details/140101489

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习使用html和js实现打字机效果代码整理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(43, 52, 82);
        }

        .text {
            font-family: 'fangsong';
            display: inline-block;
            position: relative;
            font-size: 40px;
            height: 60px;
            line-height: 60px;
            color: rgb(245, 245, 245);
        }

        .text::after {
            content: '';
            position: absolute;
            right: -10px;
            top: 5px;
            height: 50px;
            width: 3px;
            background-color: #fff;
            animation: san 0.5s steps(1) infinite;
        }

        @keyframes san {
            0%, 100% {
                background-color: #fff;
            }
            50% {
                background-color: transparent;
            }

        }
    </style>
</head>
<body>
<h1>
    <span class="text"></span>
</h1>
<script>
    const text = document.querySelector('.text');
    const txt = ["qipa250二手车买卖面临的挑战确实很多，以下是一些可能有助于扭转局面的建议:\n" +
    "1. 提高服务质量：为客户提供更好的服务，例如更快速的车况检测、更详细的车辆描述和更高的购车体验，从而提高客户满意度和忠诚度。\n"];
   
    var index = 0;
    var xiaBiao = 0;

    var huan = true;
    var timer = null

    timer = setInterval(function () {

        if (huan) {
            text.innerHTML = txt[xiaBiao].slice(0, ++index);
        } else {
            text.innerHTML = txt[xiaBiao].slice(0, index--);
        }

        if(text.innerHTML.length == txt[0].length){
          console.log('停止');
          huan = false
        }

        if(text.innerHTML.length == 0){
          console.log('开始');
          huan = true
        }

    }, 50);//调整显示速度

</script>
</body>
</html>

记录一下啦