一款非常棒的純CSS3 3D選單演示及製作教程

2022-03-28 17:56:21 字數 2721 閱讀 9716

這段時間比較忙,很久沒在這裡分享一些漂亮的html5和css3資源了,今天起的早,看到一款很不錯的css3 3d選單,覺得非常上眼,就將它分享給大家,順便來分析一下實現的原始碼。下面是效果圖:

看了效果圖是不是覺得它是一副麻將,對,第一眼我也認為是用css3寫的麻將特效,結果我錯了,它只是長得比較像而已。

另外,你也可以在這裡直接檢視選單的demo演示。

接下來再分析一下實現這款3d選單的源**。

**主要由html和css3組成,應該說還是比較簡單的。

首先是html**:

<

ul>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-reorder'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-th-large'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-bar-chart'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-tasks'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-bell'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-archive'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-comment'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-sitemap'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-thumbs-up'

>

i>

a>

li>

<

li>

<

a class

='list-item'

href

=''>

<

i class

='icon-tumblr'

>

i>

a>

li>

ul>

這裡用了標準的ul li列表來構建選單的html框架,層次非常清晰。

接下來重點是css**,如何用css3的特性來實現選單的側躺和陰影效果,從來讓其看起來呈3d的狀態。

ul
上面的這幾行**很關鍵,我們也可以看出用了css3的transform屬性的rotate()實現選單整體旋轉一定角度,然後用skew()讓選單傾斜乙個角度,這樣選單就開始有3d立體的感覺了。

接下來是每乙個選單項的樣式:

.list-item .list-item:hover .list-item:hover:before, .list-item:hover:after .list-item:hover:before .list-item:hover:after .list-item:before, .list-item:after .list-item:after .list-item:before
我們可以看到用了shadow實現每乙個選單項都有投影,至此,整個選單的3d效果就已經渲染完了。

另外就是滑鼠滑過選單項的效果,利用了css3的動畫特性讓選單項背景色漸變,形成凸起的效果。

一款非常棒的純CSS3 3D選單演示及製作教程

這段時間比較忙,很久沒在這裡分享一些漂亮的html5和css3資源了,今天起的早,看到一款很不錯的css3 3d選單,覺得非常上眼,就將它分享給大家,順便來分析一下實現的原始碼。下面是效果圖 看了效果圖是不是覺得它是一副麻將,對,第一眼我也認為是用css3寫的麻將特效,結果我錯了,它只是長得比較像而...

一款純css3實現的動畫按鈕

今天給大家分享一款純css3實現的動畫按鈕。第一排的按鈕當滑鼠經過的背景色動畫切換,圖示從右側飛入,第二排的按鈕當滑鼠經過的時候邊框動畫切換,圖示右側飛入,效果非常好,一起看下效果圖 實現的 html div class black a href class btn span become a me...

一款純css3實現的翻轉按鈕

之前為大家介紹了好多純css3實現的很漂亮的按鈕。今天小編要給各再分享一款純css3實現的翻轉按鈕。實現中給出了兩種的翻轉特效,一種是基於按扭的左邊緣為中心線,另一種是基於按鈕的中間為中心線。我們一起看下效果圖 實現的 html article a target blank class btn fo...