先看效果：
CSS3波浪菜單
請使用支持CSS3的浏覽器查看本頁
也可以點擊這裡查看效果
完整HTML文件代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3波浪菜單-</title>
<style>
body {
background:
#66cc66;
}
.b-nav {
overflow: hidden;
position: relative;
margin: 3em auto 0;
width: 28em; height: 10em;
}
.b-menu {
width: 0; height: 0;
list-style: none;
}
.b-menu li {
overflow: hidden;
position: absolute;
width: 12em; height: 12em;
}
.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);
}
.b-menu a {
width: 200%; height: 200%;
opacity: .7;
background: radial-gradient(transparent 57.3%,
#c9c9c9 57.7%);
color: #7a8092;
font: 900 1em/2.5 sans-serif;
text-align: center;
text-decoration: none;
transition: .5s;
}
.b-menu li:nth-child(n+4) a {
top: -100%; left: -100%;
line-height: 45.5;
}
.b-menu a:hover { opacity: 1; }
.b-menu li:after {
top: 19%; left: 19%;
width: 162%; height: 162%;
content: '';
}
.b-menu li:nth-child(n+4):after {
top: auto; right: 19%; bottom: 19%; left: auto;
}
.b-menu:before, .b-menu:after {
position: absolute;
width: 1em; height: 2.1em;
opacity: .7;
background: #c9c9c9;
content: '';
}
.b-menu:before {
top: 1.75em; left: 1.21em;
border-radius: 100% 0 0 100%/ 50% 0 0 50%;
transform: rotate(-22.5deg);
}
.b-menu:after {
bottom: 1.75em; right: 1.21em;
border-radius: 0 100% 100% 0/ 0 50% 50% 0;
transform: rotate(-22.5deg);
}
</style>
<script src="http:///keleyi/phtml/css3/10/prefixfree.min.js"></script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h1>CSS3波浪菜單</h1>請使用支持CSS3的浏覽器查看本頁</div>
<nav class='b-nav'>
<ul class='b-menu'>
<li><a href='http://'>首頁</a></li>
<li><a href='http:///menu/jquery/'>jQuery</a></li>
<li><a href='http:///menu/html5/'>HTML5</a></li>
<li><a href='http:///menu/webqd/'>WEB前端</a></li>
<li><a href='http:///menu/javascript/'>JS</a></li>
<li><a href='http:///a/bjad/8tl5of2u.htm'>本文</a></li>
</ul>
</nav>
</body>
</html>
其中：
.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個子元素。