選單欄 「三」 變形為「X」css3過渡動畫

2022-09-20 13:09:14 字數 452 閱讀 6943

最近要模仿乙個頁面,其中有乙個效果就是 三 選單欄 變形為 x 的效果,

效果如下:

圖(1)初始效果

圖(2)滑鼠懸浮效果

思路:三橫的實現:傳統可以用3個span標籤來實現,但有乙個更加巧妙的方法,1個標籤就能實現三橫效果,根據張鑫旭大神分享的利用padding用乙個標籤實現 三 的效果,大概原理是上中下橫線分別用 border-top,背景,border-bottom。用background-clip:content-box剪裁,最後用padding上下撐開,實現三橫的視覺效果,

x的實現:而變形的x也不需要額外的標籤,利用其自身after before偽類 transform旋轉,偏移實現。需要耐心的調整角度。

要注意的是,用padding撐開實現三橫效果,觸發不太靈敏,最好用乙個標籤包裹著icon標籤,在包裹層做:hover觸發

下面是**

document

建立選單欄

1 定義狀態列類 cstatusbar 2 呼叫creat 建立狀態列 3 呼叫setindicators 新增面板 4 呼叫setpaneinfo 設定面板寬度和樣式 5 呼叫setpanetext 設定狀態列面板文字 6 呼叫repositionbars 顯示狀態列 例項 現在對話方塊了中定義m...

導航選單欄製作

做法一 效果圖 導航選單.html charset gb2312 導航選單title rel stylesheet href style.css type text css head id daohang id d1 href 首頁a div id d2 關於醫學院div id d3 就業指導中心d...

Swing測試選單欄

public static void main string args jmenuitem openmenuitem new jmenuitem 開啟 開啟項事件 openmenuitem.addactionlistener new actionlistener catch exception e1...