跟大家講解下有關css3實現會動的菜單按鈕（menu）效果，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css3實現會動的菜單按鈕（menu）效果，小編也收集到了有關css3實現會動的菜單按鈕（menu）效果的相關資料，希望大家看到了會喜歡。

這篇文章給大家介紹的內容就是關于css3實現會動的菜單按鈕（menu）效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

需要做一個會的動畫按鈕效果，小前端不知道如何實現，我看了一眼需要的效果，給他寫了一個簡單的 demo。

設計師給了倆圖片，一個是 三 這樣的菜單圖標，另一個是點擊時，變成 X 的圖標。希望在這兩個圖標之間，有動畫切換效果。

因為圖標非常簡單，我們可以用 css 把這倆圖標畫出來，然后做一個動畫的過度效果就可以了。代碼如下：

html代碼 <p class="box"> <p class="menu"></p> </p>

外面的 .box 只是為了撐開頁面，沒有實際作用。有用的，就是一個 .menu。

CSS 代碼.box { margin: 200px; }.menu { width: 100px; height: 100px; position: relative; }.menu:before, .menu:after { content: ""; display: block; width: 100px; height: 16px; background: #000; border-radius: 8px; position: absolute; left: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }.menu:before { top: 5px; box-shadow: 0 37px #000; }.menu:after { bottom: 5px; }.menu:hover:before { top: 42px; box-shadow: none; -webkit-transform: rotate(225deg); transform: rotate(225deg); }.menu:hover:after { bottom: 42px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

重點解釋：

一個元素給加上了 transition: all 0.15s ease-in-out; 這樣的代碼，那么當他的任何屬性發生變化的時候，都會有切換效果。更多內容請參考 CSS3 transition 屬性

因為有三個橫線，所以 :before 和 :after 兩個偽元素還不夠。我不愿意再去額外添加一個元素，使有更多的東西可以控制。所以，我用了一個 box-shadow: 0 37px #000; 陰影的方式，實現中間的那個橫線的效果。 :before 和 :after 分別放在上面和下面。

切換 X 的時候，只有兩個元素，我只要把上面添加的陰影給去掉即可 box-shadow: none;。

然后就是位置的變化，和添加旋轉了。位置變化不表。旋轉使用了 transform: rotate(225deg); 這個屬性來實現。更多內容，請參考 CSS3 transform 屬性

最終實現效果如下：

好，效果就實現了。上面的動畫我是放到切換實現3秒，為的是看清楚動畫細節效果。

其實，會了這個思路，我們可以做很多簡單的動畫效果的。

相關文章推薦：

css中display：flex屬性實現元素垂直居中的代碼

如何實現單行文字向上滾動的效果（附代碼）

以上就是css3實現會動的菜單按鈕（menu）效果的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網