使用css3制作动感导航条示例

下面是使用 CSS3 制作动感导航条的攻略。

一、要点

在制作动感导航条时，需要使用到以下技术点：

1. CSS3 过渡效果
2. CSS3 transform 变形
3. CSS3 伪元素
4. 背景渐变效果

二、示例 1：上下滑动效果

1. HTML 结构

首先我们需要准备 HTML 结构，例如：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

2. CSS 样式

对于上述 HTML 结构，我们可以通过下面的 CSS 样式制作动感导航条：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  background-color: #333;
}

ul {
  display: flex;
  height: 50px;
}

li {
  margin: 0 10px;
  position: relative;
  font-size: 14px;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s;
}

a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #fff;
  transition: all 0.3s;
}

a:hover::before {
  width: 100%;
}

a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: red;
  transition: all 0.3s;
  transform: translateY(-8px);
}

a:hover::after {
  width: 100%;
  transform: translateY(0);
}

3. CSS 样式解析

1）HTML 结构

首先是 HTML 结构，我们使用 <nav> 标签来包裹整个导航条，并使用 <ul> 和 <li> 标签来表示导航条的列表项。

2）CSS 样式

对于 <nav> 标签，我们使用 display: flex 和 justify-content: center 来使得导航条居中显示，并使用 align-items: center 让导航条上下居中对齐。

对于 <ul> 和 <li> 标签，我们使用 display: flex 让列表项水平排列，并使用 height: 50px 来设置列表项的高度。

对于 <a> 标签，我们使用 display: flex 和 justify-content: center，align-items: center 让文字水平垂直居中对齐，并使用 height 来设置 <a> 标签的高度和列表项的高度保持一致。

使用 text-decoration: none 来取消下划线。

使用 transition 属性来使得文字下面的线条和底部边框有过渡效果。

使用伪元素 ::before 来制作文字下面的线条，并使用 width 属性和 transition 属性组成动态展示的效果。

使用伪元素 ::after 来制作底部的边框，并使用 width 属性和 transition 属性、transform: translateY(-8px) 等变化属性组成动态展示上下滑动效果的效果。

三、示例 2：背景渐变效果

1. HTML 结构

同样是优先准备 HTML 结构，例如：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

2. CSS 样式

对于上述 HTML 结构，我们可以通过下面的 CSS 样式制作动感导航条：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 200% 100%;
  animation: gradient 5s ease infinite;
}

ul {
  display: flex;
  height: 50px;
}

li {
  margin: 0 10px;
  position: relative;
  font-size: 14px;
}

a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #f00;
}

3. CSS 样式解析

1）HTML 结构

同样地，HTML 结构与示例 1 一致。

2）CSS 样式

对于 <nav> 标签，我们使用了 background 属性来制作背景渐变效果，并设置了 background-size: 200% 100% 来设置渐变过程的横向宽度为 200%，并同时使用 animation 属性和 @keyframes 来设置动画，使得导航条背景渐变不断重复。

对于 <a> 标签和列表项，我们使用了 height 属性使得 <a> 标签与列表项的高度保持一致，并使用 justify-content 和 align-items 来使得文本在目标区域内居中显示。

使用 color 属性来设置文本的颜色，并在鼠标移上去时，使用 :hover 选择器来改变文本的颜色。