一款纯CSS模拟路牌的菜单效果,这种垂直路牌的效果有种3D的立体感觉,另外,鼠标悬停也有一个悬停特效,当然啦,也时可以自定义菜单样式的,喜欢的童鞋请收下吧。
页面的head部分,无需引入任何javascript,仅需设置好页面各元素的样式,代码如下:
*, *:before, *:after {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
body {
text-align: center;
background-color: hsl(49,97%,74%);
}
nav {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
color: #222;
display: inline-block;
}
nav > a {
display: block;
text-decoration: none;
color: inherit;
font-size: 1.4em;
text-transform: uppercase;
transform-origin: 0 0;
transform: matrix(1, -0.4, 0, 1.2, 0, 100);
padding: .2em;
margin-bottom: .3em;
transition: .5s background;
}
.home {
font-size: 3em;
}
nav > a:nth-of-type(even) {
border-right: 6px solid;
border-top: 1px solid;
border-bottom: 1px solid;
}
nav > a:nth-of-type(odd) {
border-left: 6px solid;
}
nav > a:hover, nav > a:focus {
background: #222;
color: hsl(49,97%,74%);
border-color: #222;
}
页面的body部分,结构比较简单,这里用了html5的一个nav标签,代码如下:
<nav role='navigation'>
<a href="#" class='home'>健康</a>
<a href="#">快乐</a>
<a href="#">财富</a>
<a href="#">自由</a>
</nav>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791