使用 HTML 和 CSS 的橡皮筋文本动画

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

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

HTML



    
        
        Rubber Band Text Animation
         
    
    
        
            GeeksforGeeks
            Hover over on the text

CSS

HTML



    
        
        Rubber Band Text Animation
        
    
    
        
            GeeksforGeeks
            Hover over on the text

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

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

CSS

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

HTML



    
        
        Rubber Band Text Animation
        
    
    
        
            GeeksforGeeks
            Hover over on the text

输出：