下劃線滑動

2021-08-28 01:44:45 字數 927 閱讀 8562

下劃線滑動,

最後乙個li空著,留著後面有用,通過絕對定位,把最後乙個 li.quebec 定位到導航下方,設定寬度高度。設定 transition,當我們改變 left, width的時候就能實現動畫。

css 樣式:

ul 

li li a

.selected a

最後乙個li空著,留著後面有用。(css樣式就不多解釋了啊)

實現導航下劃線

下面實現動畫部分。

下方紫色滾動條是通過,剛才留著的最後乙個li元素實現。 

.line
注釋:z-index 屬性設定元素的堆疊順序。but只能在定位元素奏效(position:)

overflow是對內容溢位元素框做的處理事情。

transition-property是實現下劃線動畫效果;

transition-duration 完成動畫的時間;

-webkit:適配safari 和 chrome 瀏覽器

-moz:適配firefox4瀏覽器

-o:適配opera瀏覽器

當hover到導航上面的時候,li.quebec 就定位left到其下面。實現這個效果的是css3的同級通用選擇器 「~」

比如 a ~ b 匹配的是 任何在a元素之後的同級b元素。

.community:hover ~ li.line 

.support:hover ~ li.line

.more:hover ~ li.line

so這裡就完成了乙個 純css的下劃線動畫導航。

為了效果更炫一點,我們還可以在hover不同li的時候,改變li.line

的顏色、背景、透明度等。

Python單下劃線和雙下劃線

python 用下劃線作為變數字首和字尾指定特殊變數。不能用 from moduleimport 匯入 系統定義名字 類中的私有變數名 核心風格 避免用下劃線作為變數名的開始。因為下劃線對直譯器有特殊的意義,而且是內建識別符號所使用的符號,我們建議程式設計師避免用下 劃線作為變數名的開始。一般來講,...

美化下劃線

在css中,眾所周知使用text decoration underline 可以為任何文字新增下劃線的效果。不過我們一般都在初始化裡把a標籤的下劃線去掉 text decoration none 有沒有想過美化這些下滑下劃線呢 理想的場景中,強調使用下劃線,它應該做到以下幾點 這些要求並不為過,都是...

Python 單下劃線和雙下劃線解析

單下劃線 單下劃線開始的成員變數叫做保護變數,意思是只有類物件和子類物件自己能訪問到這些變數 雙下劃線 開始的是私有成員,意思是只有類物件自己能訪問,連子類物件也不能訪問到這個資料。如下列所示 以單下劃線開頭 foo 的代表不能直接訪問的類屬性,需通過類提供的介面進行訪問,不能用 from impo...