HTML+CSS：导航栏组件

效果演示

实现了一个导航栏的动画效果，当用户点击导航栏中的某个选项时，对应的选项卡会向左平移，同时一个小圆圈会出现在选项卡的中心，表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。

Code

html 复制代码

<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4144272_3vtq4renm6e.css">

<ul class="nav">
    <li class="active">
        <i class="iconfont icon-home"></i>
        <span>Home</span>
    </li>
    <li>
        <i class="iconfont icon-envelope"></i>
        <span>Email</span>
    </li>
    <li>
        <i class="iconfont icon-comment"></i>
        <span>Message</span>
    </li>
    <li>
        <i class="iconfont icon-heart"></i>
        <span>Like</span>
    </li>
    <li>
        <i class="iconfont icon-user"></i>
        <span>Profile</span>
    </li>

    <div class="indicator"></div>
</ul>

css 复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #e8e8e8;
}

.nav {
    width: 400px;
    height: 70px;
    padding: 0 25px;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    display: flex;
}

.nav li {
    width: 70px;
    height: 70px;
    z-index: 1;
    position: relative;
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav li i {
    position: relative;
    display: block;
    height: 70px;
    line-height: 70px;
    font-size: 24px;
    text-align: center;
    transition: all 0.5s;
}

.nav li span {
    position: absolute;
    font-size: 12px;
    letter-spacing: 2px;
    transition: all .5s;
    opacity: 0;
    transform: translateY(20px);
}

.nav li.active i {
    transform: translateY(-35px);
    color: #fff;
}

.nav li.active span {
    opacity: 1;
    transform: translateY(10px);
}

.indicator {
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: #2196f3;
    border-radius: 50%;
    border: 6px solid #e8e8e8;
    transition: all .5s;
}

.indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 0 #e8e8e8;
}

.indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 0 #e8e8e8;
}

li:nth-child(1).active~.indicator {
    transform: translateX(calc(70px * 0));
}

li:nth-child(2).active~.indicator {
    transform: translateX(calc(70px * 1));
}

li:nth-child(3).active~.indicator {
    transform: translateX(calc(70px * 2));
}

li:nth-child(4).active~.indicator {
    transform: translateX(calc(70px * 3));
}

li:nth-child(5).active~.indicator {
    transform: translateX(calc(70px * 4));
}

实现思路拆分

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

这段代码定义了全局样式，包括设置全局的字体、边距和盒模型等。

css 复制代码

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #e8e8e8;
}

这段代码定义了页面的基本样式，包括设置页面的高度、背景颜色、居中显示等。

css 复制代码

.nav {
  width: 400px;
  height: 70px;
  padding: 0 25px;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
  display: flex;
}

这段代码定义了导航栏的样式，包括设置导航栏的宽度、高度、内边距、圆角、背景颜色、定位和显示等。

css 复制代码

.nav li {
  width: 70px;
  height: 70px;
  z-index: 1;
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

这段代码定义了导航栏中的每个选项卡的样式，包括设置选项卡的宽度、高度、z-index、定位、列表样式、光标类型、显示方式、垂直居中和水平居中等。

css 复制代码

.nav li i {
  position: relative;
  display: block;
  height: 70px;
  line-height: 70px;
  font-size: 24px;
  text-align: center;
  transition: all 0.5s;
}

这段代码定义了选项卡中的图标的样式，包括设置图标的定位、显示方式、高度、行高、字体大小、文本对齐方式和过渡效果等。

css 复制代码

.nav li span {
  position: absolute;
  font-size: 12px;
  letter-spacing: 2px;
  transition: all.5s;
  opacity: 0;
  transform: translateY(20px);
}

这段代码定义了选项卡中的标题的样式，包括设置标题的定位、字体大小、字母间距、过渡效果、透明度和 translateY 动画效果等。

css 复制代码

.nav li.active i {
  transform: translateY(-35px);
  color: #fff;
}

这段代码定义了选项卡被选中的样式，包括设置图标的 translateY 动画效果和颜色。

css 复制代码

.nav li.active span {
  opacity: 1;
  transform: translateY(10px);
}

这段代码定义了选项卡被选中的标题的样式，包括设置标题的透明度和 translateY 动画效果。

css 复制代码

.indicator {
  position: absolute;
  top: -50%;
  width: 70px;
  height: 70px;
  background: #2196f3;
  border-radius: 50%;
  border: 6px solid #e8e8e8;
  transition: all.5s;
}

这段代码定义了导航栏中的指示器的样式，包括设置指示器的定位、宽度、高度、背景颜色、圆角、边框和过渡效果等。

css 复制代码

.indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -22px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-top-right-radius: 20px;
  box-shadow: 1px -10px 0 0 #e8e8e8;
}

这段代码定义了指示器的前一个位置的样式，包括设置前一个位置的定位、宽度、高度、背景颜色、圆角和阴影等。

css 复制代码

.indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -22px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-top-left-radius: 20px;
  box-shadow: -1px -10px 0 0 #e8e8e8;
}

这段代码定义了指示器的后一个位置的样式，包括设置后一个位置的定位、宽度、高度、背景颜色、圆角和阴影等。

css 复制代码

li:nth-child(1).active~.indicator {
  transform: translateX(calc(70px * 0));
}

这段代码定义了第一个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第一个选项卡的位置。

css 复制代码

li:nth-child(2).active~.indicator {
  transform: translateX(calc(70px * 1));
}

这段代码定义了第二个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第二个选项卡的位置。

css 复制代码

li:nth-child(3).active~.indicator {
  transform: translateX(calc(70px * 2));
}

这段代码定义了第三个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第三个选项卡的位置。

css 复制代码

li:nth-child(4).active~.indicator {
  transform: translateX(calc(70px * 3));
}

这段代码定义了第四个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第四个选项卡的位置。

css 复制代码

li:nth-child(5).active~.indicator {
  transform: translateX(calc(70px * 4));
}

这段代码定义了第五个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第五个选项卡的位置。