纯CSS模拟路牌的菜单效果【原创

来源:https://www.sucaihuo.com/js/2448.html 2017-07-17 22:40浏览(876) 收藏

一款纯CSS模拟路牌的菜单效果,这种垂直路牌的效果有种3D的立体感觉,另外,鼠标悬停也有一个悬停特效,当然啦,也时可以自定义菜单样式的,喜欢的童鞋请收下吧。
纯CSS模拟路牌的菜单效果
分类:导航菜单 > 分类导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2448.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2