CSS制作波浪形菜单DEMO演示
.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）；
}www.jlnkyy.com | www.leeryy.com
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
