2. 程式人生 > >css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

阿新 • • 發佈：2018-01-06
boa 代碼 active lock osi int 事件 type 添加

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>菜單欄下劃線動畫</title>
  7. <style type="text/css">
  8. body{
  9. margin: 0;
  10. padding: 0;
  11. }
  12. header{
  13. width: 100%;
  14. height: 100px;
  15. background-color:#2D3E50;
  16. }
  17. header nav ul{
  18. width: 50%;
  19. padding: 0;
  20. margin: 0 auto;
  21. }
  22. header nav ul li{
  23. display: inline-block;
  24. padding: 0 0.8em;
  25. }
  26. header nav a{
  27. position: relative;
  28. text-decoration: none;
  29. color: #fff;
  30. display: block;
  31. padding: 1.2em 0.8em;
  32. }
  33. header nav .nav-underline:before {
  34. content: "";
  35. position: absolute;
  36. bottom: 0;
  37. width: 0;
  38. border-bottom: 2px solid #fff;
  39. }
  40. header nav .nav-underline:hover:before {
  41. width: 80%;
  42. }
  43. header nav .nav-underline:before {
  44. -webkit-transition: width 0.5s ease-in-out;
  45. -moz-transition: width 0.5s ease-in-out;
  46. -ms-transition: width 0.5s ease-in-out;
  47. -o-transition: width 0.5s ease-in-out;
  48. transition: width 0.5s ease-in-out;
  49. }
  50. header nav .nav-underline-active,
  51. header nav .nav-underline-active:hover {
  52. border-bottom: 2px solid #fff;
  53. text-align: center;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <header>
  59. <nav>
  60. <ul>
  61. <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li>
  62. <li ><a href="#" class="nav-underline">SKILLS</a></li>
  63. <li ><a href="#" class="nav-underline">INTERESTS</a></li>
  64. <li ><a href="#" class="nav-underline">CONTACT ME</a></li>
  65. </ul>
  66. </nav>
  67. </header>
  68. </body>
  69. </html>


廢話不多說先上個效果吧：效果演示

其實是個超級簡單的動畫，不過看到現在很多的網站在處理菜單欄的時候，一般都是用鼠標移入背景顏色變化或者字體顏色變化來告訴用戶他即將訪問的頁面和當前所在的頁面，我自己感覺這個小動畫在這裏比起那種效果要好看很多，所以也算替自己總結吧，就寫下來了。

要用一個比較重要的選擇器 :before選擇器

w3cschool是這麽說的：before 偽元素可以在元素的內容前面插入新內容。

首先寫html代碼：

[html] view plain copy
  1. <ul>
  2. <li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li>
  3. <li ><a href="#" class="nav-underline">SKILLS</a></li>
  4. <li ><a href="#" class="nav-underline">INTERESTS</a></li>
  5. <li ><a href="#" class="nav-underline">CONTACT ME</a></li>
  6. </ul>


為類名為nav-underline的a元素添加動畫效果，類名為nav-underline-active表示當前頁面的樣式。

[html] view plain copy
  1. .nav-underline-active,
  2. .nav-underline-active:hover {
  3. border-bottom: 2px solid #fff;
  4. text-align: center;
  5. }


元素的定位很重要，將文字定位為relative，而:before定位為absolute

[html] view plain copy
  1. header nav .nav-underline {
  2. position: relative;
  3. text-decoration: none;
  4. color: #fff;
  5. display: block;
  6. }
  7. header nav .nav-underline:before {
  8. content: "";
  9. position: absolute;
  10. bottom: 0;
  11. width: 0;
  12. border-bottom: 2px solid #fff;
  13. }
  14. header nav .nav-underline:hover:before {
  15. width: 80%;
  16. }

a元素一定要設置為display:block

[html] view plain copy
  1. header nav a{
  2. position: relative;
  3. text-decoration: none;
  4. color: #fff;
  5. display: block;
  6. padding: 1.2em 0.8em;
  7. }

然後可以定義動畫了，大家應該註意到hover事件下劃線的width由原來的0變為80%,其實動畫效果也就是改變它的寬度值，給寬度變化增加過渡效果

[html] view plain copy
  1. header nav .nav-underline:before {
  2. -webkit-transition: width 0.5s ease-in-out;
  3. -moz-transition: width 0.5s ease-in-out;
  4. -ms-transition: width 0.5s ease-in-out;
  5. -o-transition: width 0.5s ease-in-out;
  6. transition: width 0.5s ease-in-out;
  7. }

簡單的動畫已經完成啦，我把完整的代碼貼出來吧：

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

相關推薦

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

css動畫效果：實現滑鼠移入選單欄文字下出現下劃線

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

JS實現鼠標移入標簽頁的完整title提示

網頁標簽 html jpg splay del log 大名 clas 實現 一、條件 　　1、在鼠標移入標簽上時可以捕獲到 title 對象身上觸發的事件； 　　2、網頁標簽不在頁面的範圍內了，但是他還是在當前屏幕內； 　　3、標簽與頁面相對於屏幕的位置都可以得到。 有了

鼠標移入通過時間控制實現兩個不同步的動畫效果

mouse -a 實現 anim sel back this ani isa //鼠標移入事件，此處使用的是enter，與over不同的是，enter不支持冒泡 $(‘.lis td‘).mouseenter(function(){ $(this).find(‘.

css3偽放大鏡(圖片放大動畫)效果(鼠標移入圓形區域放大圖片)

left 部分 nor 圓形區域 url poi 代碼 after con 源碼： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

根據鼠標移入移出方向，實現hover效果

query lse mouse pagex ima wid this animate type 首先，我們要判斷鼠標移入對象的方向：先獲取該對象的左邊距，然後通過判斷鼠標距離上面、左面、右面、下面的值的最小值，來獲取鼠標移入對象的方向。 JS代碼： ;(function($

鼠標移入效果

pagex cti flow cross fcc abs use utf find 完整代碼 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

JavaScript 入門練習2：鼠標移入移出改變 div 大小

courier script element 鼠標移出 定位 html 標簽 into 相對 lac 有一個位於屏幕正中央的紅色 div 正方形盒子，寬高為200×200像素，鼠標移入（懸停），正方形會變成400×400像素，鼠標移出，正方形恢復200×200像素。 使用

JS實現跟隨鼠標移動的div，和一串跟隨鼠標的div，鼠標移入移出實現圖片的顏色淡入淡出

nload nts timer inf ntb doc tel ctype target 1.一直跟著鼠標移動的div：原理是div的left和top值有oEvent.clientX+scrollLeft鼠標指針向對於瀏覽器頁面（或客戶區）的水平坐標+元素中滾動條的水平偏移

web前端小白案例-鼠標移入移出效果

前端 css3 javascript html5 知識點：html標簽，css樣式（企業樣式的活用），html加css布局思維，代碼優化。特效原理（class類名活用）。 html代碼： <div id="container"> <div class

angularjs鼠標移入移出實現顯示隱藏

ucc 隱藏 itl -s 技術分享 btn 操作 image lis <tr ng-repeat="item in items track by $index"> <td data-title="操作" align="center" ng-

vue框架下實現字數過多隱藏,鼠標移入顯示功能

ssa lips pla bst class clam ssl remove 實現 vue框架下實現字數過多隱藏,鼠標移入顯示功能 html: <em class="c-300" @mouseenter="dItem && dItem.lengt

HTML 練習實現鼠標移到用戶圖像展示更多信息

body tom none oat relative gin -i class img <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

判斷鼠標移入元素方向

() jpg fun sel direction 元素 enter logs images $(this).bind("mouseenter mouseleave",function(e){ 　　 　　var w = $(this).width(); 　　 　　var

鼠標移入移除切換圖片路徑

dst gif .com cfs logo static sta bds shu <a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"

鼠標移入的box-shadow參考

prop spa sla value sheet span blog com boa box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);-webkit-transform: translate3d(0, -2px, 0);transfor

JS添加、設置屬性以及鼠標移入移出事件

tel 小明 效果 blog enter classname tex ext http 源代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

鼠標移入移出方向判斷

style -i cti fin city left jquer right wid <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <

jquery——解決鼠標移入移出導致盒子不停移動的bug

image ack style mage mouseout utf 解決 class box 使用mouseover()、mouseout()時會出現這樣一種情況，鼠標快速多次移入移出後這個盒子會在鼠標不動後繼續運動 代碼如下： <!DOCTYPE html>

鼠標移入移出事件

alt htm 技術 事件 bubuko info src bsp 鼠標 JS html 鼠標移入移出事件