国内精品视频一区二区三区_欧美人与牲口杂交在线播放_亚洲精品国男人在线视频_成人夜色视频网站在线观看_国产内射一区亚洲

知識分享

HTML5編寫漢堡包菜單之按鈕的設(shè)計方法

發(fā)表日期:2015/7/20 18:26:13 文章編輯: 瀏覽次數(shù):2801

HTML5漢堡包菜單圖標在APP或響應式設(shè)計上比較常見,一般用來展開/關(guān)閉網(wǎng)站導航菜單,然而這個菜單圖標有很多新鮮的玩法,下面一起來看看網(wǎng)頁菜單之關(guān)閉按鈕的六種玩法,小創(chuàng)意,好體驗。

網(wǎng)頁漢堡包菜單之關(guān)閉按鈕的六種玩法

第一種:偽元素 + 網(wǎng)頁圖標字體

TIPS: 點擊圖標下面的按鈕,可以顯示代碼,可以直接復制到你的編輯體驗。

Close menu 01

第二種:偽元素 + 三個HTML標簽

Close menu 02

第三種:偽元素 + 1個HTML標簽

Close menu 03

第四種:使用UNICODE編碼

Close menu 04

第五種:SVG動畫

Close menu 05

第六種:使用CSS背景屬性

聽起來有點不可思議,但確實是用CSS background屬性實現(xiàn)的,不信請自行看代碼!

Close menu 06

好了,看了這么有創(chuàng)意的關(guān)閉按鈕,你有想法了沒?直接COPY代碼到你APP或網(wǎng)頁上使用吧!點擊下面的鏈接進入該網(wǎng)站。

網(wǎng)站地址:http://lukyvj.github.io/menu-to-cross-icon/


將文章分享到..
相關(guān)新聞
全新新聞
隨機新聞
最新網(wǎng)站設(shè)計案例
Hi,我來幫您!