来源 | web前端端开发(ID:web_qdkf)
鼠标悬停在文字上时,文字会出现旋转效果。这种效果实现的原理是,将每个文字或者单词的每个字母在任一轴(最好是Y轴)一起旋转。
每个文字或者单词都包裹在标记中,然后使用CSS:hover Selector选择器,我们将在Y轴上旋转每个文字。
我们将把文字分为两部分,在第一部分中,我们将创建旋转文本的HTML基本结构。
在第二部分中,通过CSS实现将鼠标悬停在该文本时,它将使该文本结构可旋转。
在本文中,我们将使用HTML创建结构。
HTML:在此,我们创建了一个无序列表,并将每个字母包装在一个list-item(li)中。
<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>Wli>
<li>eli>
<li>Bli>
<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>
最终解决方案:
这
是上述两个代码的组合。
<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>Wli>
<li>eli>
<li>Bli>
<li>前li>
<li>端li>
<li>开li>
<li>发li>
<li>公li>
<li>众li>
<li>号li>
ul>
body>
html>