纯css3文字动画，鼠标经过文字倾斜动画

纯css3文字动画，鼠标经过文字倾斜动画

一、html

<div class="container">
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">行业方案</a></li>
<li><a href="">个人产品</a></li>
<li><a href="">服务与支持</a></li>
</ul>
</nav>
</div>

二、css

body{
margin: 0;
color: #aaa;
font-family: "微软雅黑",serif;
font-size: 1.05em;
font-weight: 500;
background: #494a5f;
}
ul{
list-style-type: none;
}
.container{
width: 1130px;
margin: 0 auto;
text-align: center;
min-height: 600px;
}
.container nav{
text-align: center;
margin-top: 60px;
margin-bottom: 40px;
position: relative;
}
.container li{
display: inline-block;
}
.container li a{
display: block;
font-size: 20px;
color: #aaa;
text-align: center;
text-decoration: none;
padding: 10px 15px;
}
.container li a:hover{
color: white;
/* 旋转5度，放大1.1倍 */
transform: rotate(5deg) scale(1.1);
}

导航字体水平排列，鼠标悬停在字体上，字体旋转5度，放大1.1倍，效果如下所示：

鼠标悬停到字体上，效果：

使用用before和after绘制小图形，css代码：

/* 用before和after绘制小图形 */
.container li a::before,.container li a::after{
content: '';
display: block;
width: 0px;
border-top: 1px solid white;
position: relative;
margin: auto;
z-index: -1;
opacity: 0;
}
.container li a::before{
top: 0;
transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
.container li a::after{
top: 5px;
transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}
.container li a:hover::before,
.container li a:hover::after{
width: 20px;
opacity: 1;
transition: all 0.3s ease;
}

鼠标悬停到超链接a上，使用before和after绘制的图形，在鼠标悬停状态的时候，各自发生旋转和位置的偏移，效果如下所示：