用CSS3制作很特别的波浪形菜单-阿里云开发者社区

用CSS3制作很特别的波浪形菜单

2014-04-12 810

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多，各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单，它的外形是波浪形的，弯弯曲曲，结合背景，看上去还挺不错的，下面看下一效果图。

原文: 用CSS3制作很特别的波浪形菜单

网页菜单我们见过很多，各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的CSS3菜单，它的外形是波浪形的，弯弯曲曲，结合背景，看上去还挺不错的，下面看下一效果图。

我想说可能菜单并不是很实用，但是很有创意，而且也方便我们学习CSS3。

当然，你可以到这里查看DEMO演示。

接下来我们来对这款波浪形菜单的源代码简单分析一下。

HTML代码的结构非常简单：

<nav class='b-nav'>
  <ul class='b-menu'>
    <li><a href='#'></a></li>
    <li><a href='#'></a></li>
    <li><a href='#'></a></li>
    <li><a href='#'></a></li>
    <li><a href='#'></a></li>
    <li><a href='#'></a></li>
  </ul>
</nav>

然后是CSS代码，这里我们对菜单项进行绝对定位

.b-menu li {
  overflow: hidden;
  position: absolute;
  width: 12em; height: 12em;
}

接着就是重点的波浪形效果的CSS代码了，这里主要利用了CSS3的transform动画属性，利用rotate进行旋转，skewY进行y轴倾斜。

.b-menu li:nth-child(-n+3) {
  top: 0.66em; left: -5.68em;
  transform-origin: 100% 100%;
}
.b-menu li:nth-child(n+4) {
  right: -5.69em; bottom: 0.66em;
  transform-origin: 0 0;
}
.b-menu li:first-child {
  transform: skewY(67.5deg);
}
.b-menu li:nth-child(2) {
  transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:nth-child(3) {
  transform: rotate(45deg) skewY(67.5deg);
}
.b-menu li:nth-child(4) {
  transform: skewY(67.5deg);
}
.b-menu li:nth-child(5) {
  transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:last-child {
  transform: rotate(45deg) skewY(67.5deg);
}
.b-menu a, .b-menu li:after {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 .2em black, inset 0 0 .2em black;
  transform: skewY(-67.5deg) rotate(-11.25deg);
}