使用CSS和JavaScript的自我输入文本效果

自我输入文本效果 是一种效果，其中文本的所有字母依次逐个显示，给人一种自己在屏幕上输入的感觉。即使这是一个基本的文本效果，它仍然是吸引人和有效的动画。这种动画广泛应用于所有现代Web应用程序中，非常容易实现。这可以只使用 CSS 或只使用 JavaScript 设计和实现，开发人员可以根据自己的创意修改此动画。例如，我们可以增加或减少文本显示的速度，甚至在文本末尾添加一个闪烁的光标来增强动画效果。

在本教程中，我们将使用 HTML 、 CSS 和 JavaScript 实现自我输入文本效果。我们假设您熟悉HTML和CSS规则，并具有基本的CSS动画知识。

步骤1： 使用 npm 安装 Browsersync 。我们将使用Browsersync启动服务器，并提供一个URL来查看HTML网站、CSS动画以及加载相应的JavaScript文件。我们将全局安装Browsersync。

npm install -g browser-sync

步骤2： 在你的项目根文件夹中创建一个“index.html”文件、一个index.css文件和一个index.js文件。

HTML: 将以下代码片段添加到该文件中。该文件包含了包含在其中的CSS和JavaScript文件的代码。

CSS : overflow: hidden; CSS属性指定了内容如果溢出HTML元素的默认框的行为。由于我们指定了hidden，内容将被剪切并对用户不可见。这很重要，因为我们希望在动画完成之前不会透露文本。

white-space: nowrap; CSS属性指定了文本内容中空白字符的行为。如果存在一连串的空白字符，它们将折叠为一个空格，并且内容永远不会换行，直到遇到br HTML标签。这对于保持CSS动画的完整性非常重要。

margin: 0 auto; CSS属性仅仅是在文本被透露时扩展了边距，以支持打字效果。请参考代码注释以更好地理解。我们使用包围整个CSS动画的额外wrapper类，使用display: flex;和justify-content: center; CSS属性将其居中对齐到屏幕。CSS动画将在网站加载时触发。我们使用简单的CSS动画来实现打字效果，如下所示。详细说明可在此处找到。steps(30, end)是一个CSS动画的定时函数。第一个参数指定了函数中的间隔数，它应该是一个大于0的正整数。第二个参数是一个可选参数，值被设置为end。

JavaScript: 在这个文件中，我们通过逐步增加的index值，使用charAt()和setTimeout() JavaScript函数，手动将每个字母追加到HTML h1标签的#effect元素中。在setTimeout()函数中设置的间隔决定了文本被透露的速度，从而显示出自动打字效果。textEffect()函数通过Self Typing Text Effect的onClick HTML属性来触发，该属性与HTML & JS按钮一起使用。在我们的示例中，我们将间隔设置为50毫秒，但根据需要可以重新调整。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>GeeksforGeeks</title> 
  
    <!-- Loading External index.css file -->
    <link rel="stylesheet" href="index.css"> 
</head> 
  
<body> 
    <h2> 
        GeeksforGeeks - Self Typing  
        Text Effect in CSS & JS 
    </h2> 
      
    <div class="wrapper"> 
        <div class="typewriter"> 
            <h1>Hello Geeks of GeeksforGeeks</h1> 
        </div> 
    </div> 
    <button class="btn btn-lg" onclick="textEffect()"> 
        Self Typing Text Effect using HTML & JS 
    </button> 
    <h1 id="effect"></h1> 
    <!-- Loading External index.js file -->
    <script src="index.js"></script> 
</body> 
  
</html>

CSS代码

.wrapper { 
  
    /* Keeping the Text in the  
       center of the Screen */
    display: flex; 
    justify-content: center; 
} 
  
.typewriter h1 { 
    /* Content is not revealed  
       until the animation */
    overflow: hidden; 
  
    /* Keeps the content on a single line */
    white-space: nowrap; 
  
    /* Gives that scrolling effect  
       as the typing happens */
    margin: 0 auto; 
  
    /* Typing Effect Animation */
    animation: typing 3.5s steps(30, end) 
} 
  
/* Typing Effect on Website Loading */
@keyframes typing { 
    from { 
        width: 0
    } 
    to { 
        width: 100%
    } 
}

JavaScript代码

var index = 0; 
var text = 'Hello Geeks of GeeksforGeeks'; 
var speed = 50; 
  
function textEffect() { 
    if (index < text.length) { 
        document.getElementById("effect") 
                .innerHTML += text.charAt(index); 
        index++; 
        setTimeout(textEffect, speed); 
    } 
}

步骤3： 此时我们的 自动打字文本效果 已经准备好了。要使用Browsersync启动应用程序，请在项目目录中运行以下命令，或直接在浏览器中运行HTML文件。