效果展示
CSS 知识点
整体页面布局
< div class = " navigation" >
< ul>
< li class = " active" >
< a href = " #" >
< span class = " icon" >
< ion-icon name = " home-outline" > </ ion-icon>
</ span>
</ a>
</ li>
< li>
< a href = " #" >
< span class = " icon" >
< ion-icon name = " person-outline" > </ ion-icon>
</ span>
</ a>
</ li>
< li>
< a href = " #" >
< span class = " icon" >
< ion-icon name = " chatbubble-outline" > </ ion-icon>
</ span>
</ a>
</ li>
< li>
< a href = " #" >
< span class = " icon" >
< ion-icon name = " camera-outline" > </ ion-icon>
</ span>
</ a>
</ li>
< li>
< a href = " #" >
< span class = " icon" >
< ion-icon name = " settings-outline" > </ ion-icon>
</ span>
</ a>
</ li>
< div class = " indicator" >
< span> </ span>
</ div>
</ ul>
</ div>
实现整体容器样式 及 图标元素样式
.navigation {
width : 420px;
height : 70px;
background : #209cff;
display : flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
box-shadow : 0 5px 15px rgba ( 0, 0, 0, 0.1) ;
border-radius : 10px;
}
.navigation ul {
position : relative;
display : flex;
flex-flow : row wrap;
width : 350px;
}
.navigation ul li {
position : relative;
list-style : none;
width : 70px;
height : 70px;
z-index : 1;
}
.navigation ul li a {
position : relative;
display : flex;
justify-content : center;
align-items : center;
width : 100%;
}
.navigation ul li a .icon {
position : relative;
display : block;
font-size : 1.5em;
color : #fff;
line-height : 70px;
opacity : 0.75;
transition : 0.5s;
}
.navigation ul li.active a .icon {
opacity : 1;
color : #209cff;
transform : translateY ( -8px) ;
}
实现滑动块样式
.indicator {
position : absolute;
top : -10px;
width : 70px;
height : 70px;
background : var ( --clr) ;
border-bottom-left-radius : 35px;
border-bottom-right-radius : 35px;
border : 6px solid var ( --clr) ;
cursor : pointer;
transition : 0.5s;
}
.indicator::before {
content : "" ;
position : absolute;
top : 4px;
left : -25.75px;
width : 20px;
height : 20px;
background : transparent;
border-top-right-radius : 16px;
box-shadow : 4px -6px 0 2px var ( --clr) ;
}
.indicator::after {
content : "" ;
position : absolute;
top : 4px;
right : -25.75px;
width : 20px;
height : 20px;
background : transparent;
border-top-left-radius : 16px;
box-shadow : -4px -6px 0 2px var ( --clr) ;
}
.indicator span {
position : absolute;
bottom : 0px;
left : -1px;
width : 60px;
height : 60px;
border : 4px solid #209cff;
border-radius : 50%;
box-shadow : 0 5px 15px rgba ( 0, 0, 0, 0.15) ;
transform : scale ( 0.85) ;
}
编写导航菜单项点击事件
let list = document. querySelectorAll ( ".navigation li" ) ;
function activeLink ( ) {
list. forEach ( ( item ) => {
item. classList. remove ( "active" ) ;
this . classList. add ( "active" ) ;
} ) ;
}
list. forEach ( ( item ) => {
item. addEventListener ( "click" , activeLink) ;
} ) ;
编写导航菜单项滑块移动样式
.navigation ul li:nth-child(2).active ~ .indicator {
transform : translateX ( calc ( 70px * 1) ) ;
}
.navigation ul li:nth-child(3).active ~ .indicator {
transform : translateX ( calc ( 70px * 2) ) ;
}
.navigation ul li:nth-child(4).active ~ .indicator {
transform : translateX ( calc ( 70px * 3) ) ;
}
.navigation ul li:nth-child(5).active ~ .indicator {
transform : translateX ( calc ( 70px * 4) ) ;
}
完整代码下载
完整代码下载