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

📌 相关文章

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

📅 最后修改于: 2021-08-31 07:28:31 🧑 作者: Mango

Self-Typing Text Effect是一种效果，其中文本的所有字母一个一个，一个接一个地显示出来，给人一种自己在屏幕上键入的外观和感觉。尽管这是一个基本的文本效果，但它仍然是一种吸引眼球和有效的动画。该动画广泛用于所有现代 Web 应用程序中，并且非常易于实现。这可以仅使用CSS或仅使用 JavaScript来设计和实现，开发人员可以根据他们的创造力修改此动画。例如，我们可以增加或减少文本显示的速度，甚至可以在文本末尾添加一个闪烁的光标来增强动画效果。对于在同一行上工作且与此文本效果相似的不同版本的文本显示效果，请参阅文章：

如何使用 HTML 和 CSS 创建文本显示效果?

在本教程中，我们将使用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 。
index.html：在该文件中添加以下代码片段。此文件包含 CSS 和 JavaScript 文件的代码。

html



  

    
    
    GeeksforGeeks
  
    
    

  

    
        GeeksforGeeks - Self Typing 
        Text Effect in CSS & JS
    
      
    
        
            Hello Geeks of GeeksforGeeks

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%
    }
}

index.css溢出：隐藏； CSS 属性指定内容在溢出 HTML 元素默认框时的行为。正如我们指定的hidden ，内容最初将被剪切并且对用户不可见。这很重要，因为我们希望确保在动画完成之前不会显示文本。

空白：nowrap； CSS 属性指定文本内容中空格的行为。一系列空格(如果存在)将折叠为单个空格，并且在遇到br HTML 标记之前，内容永远不会换行到下一行。这对于防止 CSS 动画中断很重要。

保证金：0自动； CSS 属性只是在文本显示时扩展边距，以支持打字效果。请参阅代码注释以获得更好的理解。我们为整个 CSS 动画定义了一个额外的包装类，使用display: flex;将其与屏幕中心对齐。和justify-content: 中心； CSS 属性。 CSS 动画将在网站加载后立即触发。我们使用简单的 CSS 动画来实现打字效果，如下所示。可以在此处找到对其的详细说明。 steps(30, end)是一个 CSS 动画计时函数。第一个参数指定函数的间隔数，它应该是一个大于0的正整数。第二个参数是可选参数，值设置为end 。

参考文章

CSS | animation-timing-function property

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%
    }
}

index.js：在这个文件中，我们通过增加索引值，使用 charAt() 和 setTimeout() JavaScript 函数从文本中获取和附加每个字符，手动将每个字母附加到 HTML h1标签的#effect元素。 setTimeout()函数设置的间隔决定了文本显示的速度，从而显示自打字效果。 textEffect()函数由Self Typing Text Effect using HTML & JS button 的onClick HTML 属性触发。在我们的例子中，我们将间隔设置为50 毫秒，但可以根据方便重新调整。

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 文件。
```
browser-sync start --server --files "*"
```
输出：这会在服务器模式下启动 Browsersync 并监视目录中的所有文件是否有*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。

html

GeeksforGeeks - Self Typing Text Effect in CSS & JS

Hello Geeks of GeeksforGeeks

css

css