效果演示
实现了一个导航栏的动画效果，当用户点击导航栏中的某个选项时，对应的选项卡会向左平移，同时一个小圆圈会出现在选项卡的中心，表示当前选项卡的位置。这个效果可以让用户更加清晰地了解当前页面的位置和内容。
Code
<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>
* {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));
}
实现思路拆分
* {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;
}
这段代码定义了导航栏中的每个选项卡的样式，包括设置选项卡的宽度、高度、z-index、定位、列表样式、光标类型、显示方式、垂直居中和水平居中等。
.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);
}
这段代码定义了选项卡中的标题的样式，包括设置标题的定位、字体大小、字母间距、过渡效果、透明度和 translateY 动画效果等。
.nav li.active i {transform: translateY(-35px);color: #fff;
}
这段代码定义了选项卡被选中的样式，包括设置图标的 translateY 动画效果和颜色。
.nav li.active span {opacity: 1;transform: translateY(10px);
}
这段代码定义了选项卡被选中的标题的样式，包括设置标题的透明度和 translateY 动画效果。
.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));
}
这段代码定义了第一个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第一个选项卡的位置。
li:nth-child(2).active~.indicator {transform: translateX(calc(70px * 1));
}
这段代码定义了第二个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第二个选项卡的位置。
li:nth-child(3).active~.indicator {transform: translateX(calc(70px * 2));
}
这段代码定义了第三个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第三个选项卡的位置。
li:nth-child(4).active~.indicator {transform: translateX(calc(70px * 3));
}
这段代码定义了第四个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第四个选项卡的位置。
li:nth-child(5).active~.indicator {transform: translateX(calc(70px * 4));
}
这段代码定义了第五个选项卡被选中的样式，包括设置指示器的 translateX 动画效果，将其平移到第五个选项卡的位置。
