Rumah > hujung hadapan web > html tutorial > 纯css实现Magicline Navigation(下划线动画导航菜单)_html/css_WEB-ITnose

纯css实现Magicline Navigation(下划线动画导航菜单)_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:45:14
asal
1145 orang telah melayarinya

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

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

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

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

实现思路

HTML 结构

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

<ul class="a">  <li class="n1"><a href="#">Navigator A</a></li>  <li class="n2"><a href="#">Navigator B</a></li>  <li class="n3 selected"><a href="#">Navigator C</a></li>  <li class="n4"><a href="#">Navigator D</a></li>  <li class="quebec"> </li></ul>
Salin selepas log masuk

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

CSS 布局

实现基本样式,不多解释:

  li {      list-style: none outside;      position: relative;      z-index: 1;      float: left;      padding: 0 0 0 0;  }  li a {      position: relative;      top: 5px;      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: #340e56;  }
Salin selepas log masuk

实现导航下划线

下面实现动画部分。

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

 .quebec {      position: absolute;      bottom: -5px;      left: 0;      z-index: 3;      margin: 0;      border: 0;      width: 5px;      height: 5px;      padding: 0;      overflow: hidden;      text-indent: -9999em;      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;  }
Salin selepas log masuk

通过绝对定位,把最后一个 li.quebec 定位到导航下方,设置宽度高度。设置 transition,当我们改变 left, width的时候就能实现动画。

动起来

当hover到导航上面的时候,li.quebec 就定位left到其下面。实现这个效果的是css3的同级通用选择器 “~”

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

  .n1:hover ~ li.quebec { left: 0; width: 95px; }  .n2:hover ~ li.quebec { left: 100px; width: 95px; }  .n3:hover ~ li.quebec { left: 192px; width: 95px; }  .n4:hover ~ li.quebec { left: 285px; width: 95px; }
Salin selepas log masuk

这里就完成了一个 纯css的下划线动画导航。 最后的效果:Demo查看

扩展

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

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

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan