下劃線滑動,
最後乙個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...