纯css实现Magicline Navigation(下划线动画导航菜单)

Apollo 发布于2019-08-19 17:20 / 1222人阅读

摘要：布局实现基本样式，不多解释实现导航下划线下面实现动画部分。这里就完成了一个纯的下划线动画导航。最后的效果查看扩展当我们会实现水平的下划线动画导航后，实现背景移动动画导航思路也是一样，不过是高度宽度的变化，背景透明度的变化。

看别人网站的时候，看到一种导航菜单的动画，觉得很有意思，就仔细研究起来。

目前见过的动画有三种：水平下划线动画导航、水平背景动画导航、垂直动画导航，他们实现思路都是一样的，都是依赖 css3的同级通用选择器 "~" 。

自己实现了一遍，本文简要记录实现的思想。

大家可以先看看最后实现的效果：Demo点我

实现思路 HTML 结构

HTML结构没有特殊，就是 ul -> li:


  Navigator A
  Navigator B
  Navigator C
  Navigator D

最后一个li空着，留着后面有用。

CSS 布局

实现基本样式，不多解释：

    
        
  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;
    }

实现导航下划线

下面实现动画部分。

下方紫色滚动条是通过，刚才留着的最后一个li元素实现。

 .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的时候就能实现动画。

动起来

当hover到导航上面的时候，li.quebec 就定位left到其下面。实现这个效果的是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查看

扩展

当我们会实现水平的下划线动画导航后，实现背景移动动画导航思路也是一样，不过是li.quebec高度宽度的变化，背景透明度的变化。

垂直的动画导航亦是如此，改变 li.quebec 的高度宽度，通过 translateY 控制其在垂直方向的位置。

为了效果更炫一点，我们还可以在hover不同li的时候，改变li.quebec的颜色、背景、透明度等。

原创文章，欢迎转载。转载请注明：转载自Fs21 " s Home，谢谢！
原文链接地址：纯css实现Magicline Navigation(下划线动画导航菜单)

GPU云服务器云服务器 div+css导航菜单纯CSS 导航菜单三级导航菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78436.html

教程—炫目的Off-Canvas滑动导航

摘要：设置为相对定位和的高度，加一下过渡属性给元素加上绝对定位和一些过渡。补充一些美化的样式还要给滑动的导航美化一下，包括菜单显示隐藏时的样式背景色菜单图标等。待会儿会用来进行操作酷炫的滑动动画。 Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了，本文就将讨论如何通过 jQuery 增添、删除类来操作 CSS 过渡和动画完成这样的效果。本教程将用到的资源： Font-...

ephererid 2019-08-22 10:55 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

lanffy 2019-08-26 17:29 评论0 收藏0