📌  相关文章
📜  如何使用 typed.js 创建动画打字效果?

📅  最后修改于: 2021-08-30 09:44:30             🧑  作者: Mango

Typed.js是一个 JavaScript 库,用于以您设置的速度键入一组字符串,退格它所键入的内容并以您设置的另一个字符串开始键入。

让我们首先创建一个项目文件夹并根据您的意愿命名它。创建两个文件并将它们命名为“index.html”“style.css”

  1. “index.html”中写入以下代码

    HTML
    
    
      
    
        Typed.js
        
        
    
      
    
        
            

    GeeksforGeeks

            

                                 A computer Science portal for geeks,                 A place to pratice code                                                   

        
      


    HTML
    
    
    


    HTML
    
    
      
    
        Typed.js
      
        
        
    
      
    
        
            

    GeeksforGeeks

            

                                 A computer Science portal for                  geeks, A place to pratice code                                      

        
                                              


  2. 将以下 CSS 代码写入您的“style.css”文件。

    
    
  3. 现在您必须从以下链接下载“typed.js”脚本文件夹并将其解压缩并将其保存在您的项目目录中。

    下载链接: https : //mattboldt.com/demos/typed-js/

    此外,您必须包含 jQuery 库才能使用 jQuery 函数。有两种方法,一种是下载并添加“jquery.js”文件,另一种是添加其 CDN 文件链接。在这里,您将使用 CDN 链接添加 jQuery。

    CDN 链接: https : //developers.google.com/speed/libraries/devguide#jquery

  4. 我们必须从“typed.js”文件夹中导入并添加“typed.js”文件。在“body”标签之前添加所有 JavaScript 文件。还将以下脚本添加到您的“index.html”文件中。

    HTML

    
    
    
    

    它应该是这样的。

    HTML

    
    
      
    
        Typed.js
      
        
        
    
      
    
        
            

    GeeksforGeeks

            

                                 A computer Science portal for                  geeks, A place to pratice code                                      

        
                                              

    启动“index.html”文件并注意输出。

输出: