【开发小技巧】05—如何使用HTML和CSS在鼠标悬停时旋转文本？

英文 | https://www.geeksforgeeks.org/how-to-spin-text-on-mouse-hover-using-html-and-css/

翻译 | web前端开发（ID：web_qdkf）

鼠标悬停时文本旋转称为旋转效果。以这种效果，单词的每个字母与任一轴（最好是Y轴）一起旋转。每个单词都包裹在

标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个字母。

我们将把本文分为两部分，在第一部分中，我们将创建文本的基本结构。在第二部分中，当用户将鼠标悬停在该文本结构上时，它将使该文本结构可旋转。

创建结构：在本文中，我们将使用HTML创建结构。

HTML代码：在此，我们创建了一个无序列表，并将每个字母包装在一个list-item（li）中。

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

设计结构：在本文中，我们将使该结构可旋转并添加一点装饰。

CSS代码：首先，我们提供了一些基本样式，例如边距，填充和背景。然后，我们使用float属性将列表项水平对齐。

最后，使用悬停选择器将每个字母沿Y轴旋转特定角度。如果需要，可以使用第n个子属性来延迟每个字母的旋转。使用第n个子项会遇到个人喜好和需求，因此，如果您愿意使用它，可以肯定地使用它。

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

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

输出：