用CSS3制作很特別的波浪形菜單 原文:用CSS3制作很特別的波浪形菜單

網(wǎng)頁菜單我們見過很多，各種炫酷的、實用的菜單比比皆是。昨天我看到一款很特別的CSS3菜單，它的外形是波浪形的，彎彎曲曲，結(jié)合背景，看上去還挺不錯的，下面看下一效果圖。

我想說可能菜單并不是很實用，但是很有創(chuàng)意，而且也方便我們學習CSS3。

當然，你可以到這里查看DEMO演示。

接下來我們來對這款波浪形菜單的源代碼簡單分析一下。

HTML代碼的結(jié)構(gòu)非常簡單：

<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進行旋轉(zhuǎn)，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個子元素。

最后附上該波浪形菜單的源代碼。源碼下載地址>>

posted on 2014-04-12 20:09 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3661125.html

總結(jié)

以上是生活随笔為你收集整理的用CSS3制作很特别的波浪形菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。