📜  如何使用 HTML 和 CSS 在鼠标悬停时旋转文本?

📅  最后修改于: 2021-08-30 09:46:03             🧑  作者: Mango


鼠标悬停时文本的旋转称为旋转效果或旋转效果。在这种效果中,单词的每个字母都随着任何一个轴(最好是 Y 轴)旋转。每个单词都包含在

  • 标签中,然后使用CSS:hover Selector选择器我们将在 Y 轴上旋转每个字母。我们将这篇文章分为两部分,在第一部分中,我们将创建将旋转的文本的基本结构。在第二部分中,当用户将鼠标悬停在该文本结构上时,我们将使该文本结构可旋转。

    创建结构:在本节中,我们将使用 HTML 创建结构。

    • HTML 代码:在此我们创建了一个无序列表并将每个字母包装在一个列表项(li)中。
      
      
          
              
              
              Spin Text
          
          
              
                    
      • G
      •             
      • e
      •             
      • e
      •             
      • k
      •             
      • s
      •             
      • f
      •             
      • o
      •             
      • r
      •             
      • G
      •             
      • e
      •             
      • e
      •             
      • k
      •             
      • s
      •         
          

    设计结构:在本节中,我们将使该结构可旋转并添加一点装饰。

    • CSS 代码:首先我们提供了一些基本的样式,如边距、填充和背景。然后我们使用 float 属性水平对齐我们的列表项。最后,使用悬停选择器在特定角度沿 Y 轴旋转每个字母。如果您愿意,可以使用第 n 个子属性对每个字母表的旋转应用一些延迟。第 n 个子属性的使用取决于个人喜好和需求,因此如果您想使用它,您肯定可以使用它。
      
      

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

    
    
        
            
            
            Spin Text
            
        
        
            
                  
    • G
    •             
    • e
    •             
    • e
    •             
    • k
    •             
    • s
    •             
    • f
    •             
    • o
    •             
    • r
    •             
    • G
    •             
    • e
    •             
    • e
    •             
    • k
    •             
    • s
    •         
        

    输出: