📌  相关文章
📜  使用 HTML 和 CSS 的橡皮筋文本动画

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

橡皮筋效果非常流行，当文本字符串明显变得可拉伸时，它看起来很有吸引力，看起来很酷。橡皮筋文本动画可以使用 CSS 动画轻松生成，我们将使用@keyframes规则来获得所需的输出。因此，我们将文章分为两部分，在第一部分中，我们将创建文本字符串，当用户将鼠标悬停在文本字符串上时，该字符串将变得橡胶状。我们将在第二部分添加这种效果。

创建结构：在本节中，我们将仅使用 HTML 来创建文本字符串。

  • HTML 代码：在本节中，我们将使用h1标签创建一个基本文本。 
    

    
        
        Rubber Band Text Animation
          
    
    
        
    
            
    GeeksforGeeks
    
            Hover over on the text
        
    
    

设计结构：在本节中，我们将设计结构以使创建的文本字符串弹性。

  • CSS 代码：在本节中，我们将使用 CSS 动画创建动画效果，我们将使用@keyframes规则来指定动画代码。我们将使用tranform属性来制作动画

最终解决方案：是上面两个代码段的组合。 



    
        
        Rubber Band Text Animation
        
    
    
        

            
GeeksforGeeks

            Hover over on the text
        

    

输出：