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);
}

/* 用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;
}