純css實現(xiàn)Magicline Navigation(下劃線動畫導航菜單)

Apollo 發(fā)布于2019-08-19 17:20 / 1227人閱讀

摘要：布局實現(xiàn)基本樣式，不多解釋實現(xiàn)導航下劃線下面實現(xiàn)動畫部分。這里就完成了一個純的下劃線動畫導航。最后的效果查看擴展當我們會實現(xiàn)水平的下劃線動畫導航后，實現(xiàn)背景移動動畫導航思路也是一樣，不過是高度寬度的變化，背景透明度的變化。

看別人網(wǎng)站的時候，看到一種導航菜單的動畫，覺得很有意思，就仔細研究起來。

目前見過的動畫有三種：水平下劃線動畫導航、水平背景動畫導航、垂直動畫導航，他們實現(xiàn)思路都是一樣的，都是依賴 css3的同級通用選擇器 "~" 。

自己實現(xiàn)了一遍，本文簡要記錄實現(xiàn)的思想。

大家可以先看看最后實現(xiàn)的效果：Demo點我

實現(xiàn)思路 HTML 結構

HTML結構沒有特殊，就是 ul -> li:


  Navigator A
  Navigator B
  Navigator C
  Navigator D

最后一個li空著，留著后面有用。

CSS 布局

實現(xiàn)基本樣式，不多解釋：

    
        
  ul {
    position: relative;
    overflow: hidden;
    padding-left: 0px;
  }
  li {
        list-style: none outside;
        position: relative;
        z-index: 1;
        float: left;
        padding: 0 0 0 0;
        margin-right: 10px;
    }
    li a {
        position: relative;
        width: 100px;
        color:#333 ;
        display: block;
        margin: 0 0;
        border-bottom: 5px solid transparent;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
    }
    .selected a {
        border-bottom: 5px solid #cfd0d0;
        color: #511d7f;
    }

實現(xiàn)導航下劃線

下面實現(xiàn)動畫部分。

下方紫色滾動條是通過，剛才留著的最后一個li元素實現(xiàn)。

 .quebec {
      position: absolute;
      bottom: 0px;
      left: -100px;
      z-index: 3;
      margin: 0;
      border: 0;
      width: 5px;
      height: 5px;
      padding: 0;
      overflow: hidden;
      background: #511d7f;

     -webkit-transition-property: left, width;
     -moz-transition-property: left, width;
     -ms-transition-property: left, width;
     -o-transition-property: left, width;
     transition-property: left, width;

     -webkit-transition-duration: .5s;
     -moz-transition-duration: .5s;
     -ms-transition-duration: .5s;
     -o-transition-duration: .5s;
     transition-duration: .5s;
  }

通過絕對定位，把最后一個 li.quebec 定位到導航下方，設置寬度高度。設置 transition，當我們改變 left, width的時候就能實現(xiàn)動畫。

動起來

當hover到導航上面的時候，li.quebec 就定位left到其下面。實現(xiàn)這個效果的是css3的同級通用選擇器 “～”

比如 A ~ B 匹配的是 任何在A元素之后的同級B元素。

      
  .n1:hover ~ li.quebec { left: 5px; width: 110px; }
  .n2:hover ~ li.quebec { left: 115px; width: 110px; }
  .n3:hover ~ li.quebec { left: 225px; width: 110px; }
  .n4:hover ~ li.quebec { left: 335px; width: 110px; }

這里就完成了一個純css的下劃線動畫導航。最后的效果：Demo查看

擴展

當我們會實現(xiàn)水平的下劃線動畫導航后，實現(xiàn) 背景移動動畫導航思路也是一樣，不過是li.quebec高度寬度的變化，背景透明度的變化。

垂直的動畫導航亦是如此，改變 li.quebec 的高度寬度，通過 translateY 控制其在垂直方向的位置。

為了效果更炫一點，我們還可以在hover不同li的時候，改變li.quebec的顏色、背景、透明度等。

原創(chuàng)文章，歡迎轉載。轉載請注明：轉載自Fs21 " s   Home，謝謝！
原文鏈接地址：純css實現(xiàn)Magicline Navigation(下劃線動畫導航菜單)

云服務器 GPU云服務器 div+css導航菜單純CSS 導航菜單三級導航菜單

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78436.html

教程—炫目的Off-Canvas滑動導航

摘要：設置為相對定位和的高度，加一下過渡屬性給元素加上絕對定位和一些過渡。補充一些美化的樣式還要給滑動的導航美化一下，包括菜單顯示隱藏時的樣式背景色菜單圖標等。待會兒會用來進行操作酷炫的滑動動畫。 Off-Canvas 滑動導航現(xiàn)在逐漸在移動頁面變得越來越流行了，本文就將討論如何通過 jQuery 增添、刪除類來操作 CSS 過渡和動畫完成這樣的效果。本教程將用到的資源： Font-...

ephererid 2019-08-22 10:55 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。未完待續(xù) 背景如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

BigTomato 2019-08-29 15:17 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。未完待續(xù) 背景如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

lanffy 2019-08-26 17:29 評論0 收藏0