📌  相关文章
📜  如何使用 CSS 创建跳跃文本 3D 动画效果?

📅  最后修改于: 2021-08-31 02:30:01             🧑  作者: Mango

在本文中,您将学习使用简单的 HTML 和 CSS实现 Jumping Texts 动画效果。 HTML 用于创建页面结构,CSS 用于设置样式。

HTML 代码:在本节中,我们将设计主体的基本结构。



  

    
    
    Text Jumping effect
    

  

    

        G         e         e         k         s         f         o         r         G         e         e         k         s     

  

CSS 代码:在本节中,我们将使用一些 CSS 属性来设计Jumping 文本

CSS text-shadow属性用于为文本创建阴影。它接受以逗号分隔的阴影列表。该列表将应用于文本的装饰。元素的 X 和 Y 偏移的某种组合描述了每个阴影。我们使用@keyframes作为动画代码。动画是通过逐渐从一组 CSS 更改为另一组 CSS 来创建的。所有样式的变化以百分比形式发生,或者使用关键字“from”和“to”发生样式变化,与0%和100%相同。 CSS 集可以多次更改。

CSS代码:


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



  

    
    
  
    Text Jumping effect
  
    

  

    

        G         e         e         k         s         f         o         r         G         e         e         k         s     

  

输出: