0
点赞
收藏
分享

微信扫一扫

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

杰森wang 2022-11-30 阅读 139

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

英文 | 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>



输出:

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

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

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


举报

相关推荐

0 条评论