滑鼠懸浮底部有橫條伸展的導航選單
本章節分享一段導航選單效果,當滑鼠懸浮的時候,選單底部有可以伸展的橫條。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body { background: #ccc; } .nav { width: 700px; height: 40px; margin: 200px auto; } .nav a { position: relative; display: inline-block; padding: 20px; text-decoration: none; color: #999; font-size: 18px; font-weight: 700; padding-bottom: 8px; } .nav a:after { content: ""; position: absolute; bottom: 0; left: 40%; right: 40%; width: 20%; border-bottom: 3px solid #6bc30d; opacity: 0.5; transition: all linear 0.5s; } .nav a:hover { color: #fff; } .nav a:hover:after { left: 0; width: 100%; opacity: 1.0; transition: all linear 0.5s; } </style> </head> <body> <div class="nav"> <a href="#">螞蟻部落一</a> <a href="#">螞蟻部落二</a> <a href="#">螞蟻部落三</a> <a href="#">螞蟻部落四</a> <a href="#">螞蟻部落五</a> </div> </body> </html>
上面的程式碼非常的簡單,就是利用了偽物件選擇器和css3相關動畫屬性。
相關閱讀:
(1).:after選擇器參閱CSS E:after/E::after一章節。
(2).transition參閱css transition一章節。
相關文章
- 滑鼠懸浮導航選單底部出現動畫橫線動畫
- 滑鼠懸浮中英文切換橫向導航選單
- 滑鼠懸浮背景變色導航選單
- 滑鼠懸浮可以上下伸縮的導航選單
- css3滑鼠懸浮背景滑動導航選單CSSS3
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- 滑鼠懸浮緩慢下拉導航選單
- CSS3 滑鼠懸浮立體翻滾的導航選單CSSS3
- css3滑鼠懸浮展開收縮導航選單CSSS3
- css滑鼠懸浮二級下拉導航選單CSS
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- JavaScript滑鼠懸浮展開側欄導航JavaScript
- css滑鼠懸浮下拉選單效果CSS
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- 滑鼠懸浮底部具有動態延伸條效果程式碼例項
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- 滑鼠懸浮三形選單變叉號
- CSS 滑鼠懸浮橫條從中間向兩邊擴充套件CSS套件
- jQuery底部跟隨水平導航選單jQuery
- 頁面沒有出現滾動條時底部懸浮顯示到最底部
- CSS3滑鼠懸浮橫條從中間向兩邊擴充套件效果CSSS3套件
- BLOCK、BFC、邊距合併,滑鼠懸浮選單出現BloC
- CSS3橫向導航選單效果CSSS3
- JavaScript橫向二級導航選單效果JavaScript
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- 外掛-懸浮選單
- css實現立體效果橫向導航選單CSS
- 純css實現固定在網頁底部選單導航CSS網頁
- bootstrap 選單導航選單nav li滑鼠移入hover下拉顯示boot
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- 一側具有滑鼠跟隨效果的垂直導航選單
- CSS製作橫向導航選單例項程式碼CSS單例
- css導航欄滑鼠hover的時候就出現下拉選單CSS
- 動畫必須有(二):懸浮選單瞭解一下!動畫
- Bootstrap系列 -- 40. 導航條二級選單boot
- jquery滑鼠懸浮彈出帶有箭頭的tips效果jQuery
- flutter 自定義tab導航-頂部導航-底部導航Flutter