菜單欄 “三” 變形為“X”css3過(guò)渡動(dòng)畫(huà)

最近要模仿一個(gè)頁(yè)面,其中有一個(gè)效果就是 三 菜單欄 變形為 X 的效果,
效果如下:
圖(1)初始效果
圖(2)鼠標(biāo)懸浮效果
思路:
三橫的實(shí)現(xiàn):傳統(tǒng)可以用3個(gè)span標(biāo)簽來(lái)實(shí)現(xiàn),但有一個(gè)更加巧妙的方法,1個(gè)標(biāo)簽就能實(shí)現(xiàn)三橫效果,根據(jù)張?chǎng)涡翊笊穹窒淼睦胮adding用一個(gè)標(biāo)簽實(shí)現(xiàn) 三 的效果,大概原理是上中下橫線(xiàn)分別用 border-top,背景,border-bottom。用background-clip:content-box剪裁,最后用padding上下?lián)伍_(kāi),實(shí)現(xiàn)三橫的視覺(jué)效果,
X的實(shí)現(xiàn):而變形的X也不需要額外的標(biāo)簽,利用其自身after before偽類(lèi) transform旋轉(zhuǎn),偏移實(shí)現(xiàn)。需要耐心的調(diào)整角度。
要注意的是,用padding撐開(kāi)實(shí)現(xiàn)三橫效果,觸發(fā)不太靈敏,最好用一個(gè)標(biāo)簽包裹著icon標(biāo)簽,在包裹層做:hover觸發(fā)
下面是代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .icon{ width: 50px; height: 10px; padding: 10px 0; border-top: 10px solid #000; border-bottom: 10px solid #000; background: #000; background-clip: content-box; } .fa{ cursor: pointer; width: 50px; height: 50px; transition: .3s ease; } .fa:hover>.icon{ border: 0; background: none; } .icon:before,.icon:after{ position: absolute; content: ""; width: 60px; height: 60px; transition: .3s ease; -webkit-transition: .3s ease; opacity: 0; } .icon:before{ top: -5px; border-bottom: 10px solid #000; } .icon:after{ top: 15px; border-top: 10px solid #000; } .fa:hover>.icon:before{ opacity: 1; transform: rotate(135deg) translateX(5px) translateY(-25px); -webkit-transform: rotate(135deg) translateX(5px) translateY(-25px); } .fa:hover>.icon:after{ opacity: 1; transform: rotate(-135deg) translateX(20px) translateY(39px); -webkit-transform: rotate(-135deg) translateX(20px) translateY(39px); } </style> </head> <body> <div class="fa"> <div class="icon"></div> </div> <script type="text/javascript"> </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
如何通過(guò) display:olck/none 完成一個(gè)菜單欄
這篇文章主要介紹了如何通過(guò) display:olck/none 完成一個(gè)菜單欄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-18使用layui實(shí)現(xiàn)左側(cè)菜單欄及動(dòng)態(tài)操作tab項(xiàng)的方法
這篇文章主要介紹了使用layui實(shí)現(xiàn)左側(cè)菜單欄及動(dòng)態(tài)操作tab項(xiàng)的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參2020-11-10Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼
這篇文章主要介紹了Html+Css+Jquery實(shí)現(xiàn)左側(cè)滑動(dòng)拉伸導(dǎo)航菜單欄的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們2020-03-17使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)劃過(guò)的二級(jí)菜單欄的示例
本篇文章主要介紹了使用HTML+CSS實(shí)現(xiàn)鼠標(biāo)劃過(guò)的二級(jí)菜單欄的示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-14詳解css3 Transition屬性(平滑過(guò)渡菜單欄案例)
這篇文章主要介紹了詳解css3 Transition屬性(平滑過(guò)渡菜單欄案例)的相關(guān)資料,需要的朋友可以參考下2017-09-05利用CSS實(shí)現(xiàn)幾款不錯(cuò)的菜單欄實(shí)例代碼
這篇文章主要介紹了利用CSS實(shí)現(xiàn)的幾款不錯(cuò)的菜單欄實(shí)例代碼,文中包含滑動(dòng)菜單、左側(cè)帶圖標(biāo)多級(jí)下拉菜單、立體動(dòng)感菜單、可同時(shí)折疊的手風(fēng)琴菜單、鼠標(biāo)滑動(dòng)展開(kāi)二級(jí)菜單以2017-02-16CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁(yè)的頭部菜單欄按鈕和三角形制作方法的相關(guān)資料,需要的朋友可以參考下2016-08-15純CSS制作菜單欄當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)會(huì)變色的
這篇文章主要介紹了使用CSS實(shí)現(xiàn)菜單欄的制作當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)有變色效果,個(gè)人感覺(jué)還是個(gè)不錯(cuò)的例子,希望對(duì)初學(xué)者有所幫助2014-04-14利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼
這篇文章主要介紹了利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著2021-03-22