网页菜单我们见过很多，各种炫酷的、实用的菜单比比皆是。昨天我看到一款很特别的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); }
这里说明一下nth-child(n)，它表示该父元素的第n个子元素。
最后附上该波浪形菜单的源代码。源码下载地址>>