英文 | https://www.geeksforgeeks.org/how-to-spin-text-on-mouse-hover-using-html-and-css/
翻译 | web前端开发（ID：web_qdkf）
鼠标悬停时文本旋转称为旋转效果。以这种效果，单词的每个字母与任一轴（最好是Y轴）一起旋转。每个单词都包裹在<li>标记中，然后使用CSS：hover Selector选择器，我们将在Y轴上旋转每个字母。
我们将把本文分为两部分，在第一部分中，我们将创建文本的基本结构。在第二部分中，当用户将鼠标悬停在该文本结构上时，它将使该文本结构可旋转。
创建结构：在本文中，我们将使用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>Spin Text</title> </head> <body> <ul> <li>G</li> <li>e</li> <li>e</li> <li>k</li> <li>s</li> <li>f</li> <li>o</li> <li>r</li> <li>G</li> <li>e</li> <li>e</li> <li>k</li> <li>s</li> </ul> </body> </html>
设计结构：在本文中，我们将使该结构可旋转并添加一点装饰。
CSS代码：首先，我们提供了一些基本样式，例如边距，填充和背景。然后，我们使用float属性将列表项水平对齐。
最后，使用悬停选择器将每个字母沿Y轴旋转特定角度。如果需要，可以使用第n个子属性来延迟每个字母的旋转。使用第n个子项会遇到个人喜好和需求，因此，如果您愿意使用它，可以肯定地使用它。
<style> body { margin: 0; padding: 0; }
ul { padding: 50px; margin: 0; position: absolute; top: 20%; left: 25%; } ul li { list-style: none; color: green; 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>Spin Text</title> <style> body { margin: 0; padding: 0; }
ul { padding: 50px; margin: 0; position: absolute; top: 20%; left: 25%; } ul li { list-style: none; color: green; float: left; font-size: 40px; transition: 0.8s; }
ul:hover li { transform: rotateY(360deg); } </style> </head> <body> <ul> <li>G</li> <li>e</li> <li>e</li> <li>k</li> <li>s</li> <li>f</li> <li>o</li> <li>r</li> <li>G</li> <li>e</li> <li>e</li> <li>k</li> <li>s</li> </ul> </body> </html>
输出：
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
