📌  相关文章
📜  如何使用 HTML 和 CSS 创建文本显示效果?

📅  最后修改于: 2021-08-30 10:04:33             🧑  作者: Mango

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

标签中的

标签。

html


 

    
    
    Text Reveal Animation

 

    
        

GeeksforGeeks

    
 


CSS


html


 

    
    
    Text Reveal Animation
 
    

 

    
        

GeeksforGeeks

    
 


HTML



    
    Colleting Data
    
   


 
   

Geeks For Geeks 

 


HTML


HTML



    
    Colleting Data
    
    


 
   

Geeks For Geeks 

 


CSS 代码:对于 CSS,请按照下列步骤操作:

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

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

CSS


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

html



 

    
    
    Text Reveal Animation
 
    

 

    
        

GeeksforGeeks

    
 

输出:

另一种动画方法

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

HTML




    
    Colleting Data
    
   


 
   

Geeks For Geeks 

 

CSS 代码:对于 CSS,请按照下列步骤操作:

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

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

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

HTML


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

HTML




    
    Colleting Data
    
    


 
   

Geeks For Geeks 

 

输出