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

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

橡皮筋效果非常流行,当文本字符串明显变得可拉伸时,它看起来很有吸引力,看起来很酷。橡皮筋文本动画可以使用 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         
    

输出: