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

文本显示是一种效果，其中文本的所有字母以某种动画方式一个一个地显示。有无数种方法可以为这种效果制作文本动画。您希望文本如何显示取决于您的创造力。我们将介绍一种基本且简单的入门方法。
方法：方法是使用关键帧来动画帧以逐帧缓慢显示文本。
HTML 代码：在 HTML 中，我们使用了包裹在

标签中的

标签。

html

 

    
    
    

 

    

        
GeeksforGeeks
    

 

CSS 代码：对于 CSS，请按照下列步骤操作：

• 第 1 步：首先，我们完成了一些基本样式，例如提供背景颜色、将文本居中对齐等。
• 第 2 步：然后使用名为 animate 的标识符的动画属性。
• 第 3 步：现在使用关键帧为每一帧设置动画并为每一帧设置不同的高度和宽度。

提示：您可以更改每个框架中使用的高度和宽度值，以不同方式显示文本。

CSS

完整代码：是以上两段代码的组合。

html

 

    
    
    
 
    

 

    

        
GeeksforGeeks
    

 

输出：

另一种动画方法

HTML 代码：以下代码片段创建 HTML div 元素，其中包含要修改的文本。

HTML

    
    
    
   


 

   
Geeks For Geeks 
 

CSS 代码：对于 CSS，请按照下列步骤操作：

第 1 步：首先，我们完成了一些基本样式，例如提供背景颜色、将项目居中对齐等。

第 2 步：然后使用名为 text-typing p 的标识符的动画属性。

第 3 步：现在使用关键帧从宽度 0 到 100% 设置动画。

HTML

完整代码：是以上两段代码的组合。

HTML

    
    
    
    


 

   
Geeks For Geeks 
 

输出