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

最新推荐文章于 2022-12-31 19:36:58 发布

web前端开发V

最新推荐文章于 2022-12-31 19:36:58 发布

阅读量240

点赞数

来源 | web前端端开发（ID：web_qdkf）

鼠标悬停在文字上时，文字会出现旋转效果。这种效果实现的原理是，将每个文字或者单词的每个字母在任一轴（最好是Y轴）一起旋转。

每个文字或者单词都包裹在<li>标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个文字。

我们将把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构。

在第二部分中，通过CSS实现将鼠标悬停在该文本时，它将使该文本结构可旋转。

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

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>web前端开发</title> 
</head> <body> <ul> <li>欢</li> <li>迎</li> <li>关</li> <li>注</li> <li>W</li> <li>e</li> <li>B</li> <li>前</li> <li>端</li> <li>开</li> <li>发</li> <li>公</li> <li>众</li> <li>号</li> </ul> </body> </html>

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

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

最后，使用悬停选择器将每个字母沿Y轴旋转特定角度。如果需要，可以使用第n个属性来延迟每个字母的旋转。其他属性的使用根据个人喜好和需求来，因此，你可以随意使用它。

<style> body { margin: 0; padding: 0;             } ul { padding: 50px; margin: 0; position: absolute; top: 20%; left: 25%;             } ul li { list-style: none; color: #03aabc; float: left; font-size: 40px; transition: 0.8s;             } ul:hover li { transform: rotateY(360deg);             } </style>

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>web前端开发</title> <style> body { margin: 0; padding: 0;             } ul { padding: 50px; margin: 0; position: absolute; top: 20%; left: 25%;             } ul li { list-style: none; color: #03aabc; float: left; font-size: 40px; transition: 0.8s;             } ul:hover li { transform: rotateY(360deg);             } </style> </head> <body> <ul> <li>欢</li> <li>迎</li> <li>关</li> <li>注</li> <li>W</li> <li>e</li> <li>B</li> <li>前</li> <li>端</li> <li>开</li> <li>发</li> <li>公</li> <li>众</li> <li>号</li> 
</ul> </body> </html>

最终结果如下：