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

時間  2019-12-12
標籤 css 動畫 效果 實現 鼠標 移入 菜單 文字 出現 下劃線 欄目 CSS 简体版
原文   原文鏈接
  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>  


廢話很少說先上個效果吧：效果演示css

        實際上是個超級簡單的動畫，不過看到如今不少的網站在處理菜單欄的時候，通常都是用鼠標移入背景顏色變化或者字體顏色變化來告訴用戶他即將訪問的頁面和當前所在的頁面，我本身感受這個小動畫在這裏比起那種效果要好看不少，因此也算替本身總結吧，就寫下來了。html

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

        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定位爲absolutespa

[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.net

 

 

[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%,其實動畫效果也就是改變它的寬度值，給寬度變化增長過渡效果xml

 

 

[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.         }  

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程