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