css实现一个简洁导航tabbar切换动画效果代码-html代码-BFW代码库

css实现一个简洁导航tabbar切换动画效果代码

代码语言：html

代码描述：css实现一个简洁导航tabbar切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');

html {

    box-sizing: border-box ;
    --duration: .45s ;
    --cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
    --color-1: #d5dadd ;
    --color-2: #51d5c2 ;

}

html *,
html *::before,
html *::after {

    box-sizing: inherit ;

}

body {

    margin: 0 ;
    height: 100vh ;
    display: flex ;
    overflow: hidden ;
    align-items: center ;
    justify-content: center ; 
    background-color: #f0f1f1 ;
    font-family: 'Nunito', sans-serif ;

}

.menu {

    margin: 0 ;
    width: 42em ;
    display: flex ;
    height: 10.4em ;
    user-select: none ;
    position: relative ;
    align-items: center ;
    padding: 0 1.9em 2.5em ;
    justify-content: center ;
    background-color: #fefefe ;
    border-radius: 1em 1em 4.5em 4.5em ;
    -webkit-tap-highlight-color: transparent ;

}

@media (max-width: 36em) {
  
  .menu {
    
    font-size: .55em ;
    
  }
  
}

.menu::after {

    height: 5% ;
    width: 35% ;
    bottom: 10% ;
    content: " " ;
    position: absolute ;
    border-radius: 1em ;
    background-color: #f2f3f4 ;


}

.menu__item {

    all: unset ;
    flex-grow: 1 ;
    display: flex ;
    cursor: pointer ;
    overflow: hidden ;
    padding-top: 0.5em ;
    position: relative ;
    align-items: center ;
    color: var(--color-1) ;
    justify-content: center ;
    transition: flex-grow var(--duration) var(--cubic) ;
    
}

.menu__icon {
    
    font-size: 1.05em ;
    stroke: currentColor ;
    transition: transform var(--duration) var(--cubic) ;
    
}

.menu__item::before {

    top: 9% ;
    left: 18.4% ;
    width: 1.5em ;
    height: 1.5em ;
    content: " ";
    position: absolute ;
    border-radius: 50% ;
    transform: scale(0) ;
    transform-origin: center ;
    background-color: #fdecef ;
    transition: transform var(--duration) var(--cubic) ;

}

.menu__item::after {

    left: 0;
    bottom: 0 ;
    content: " " ;
    height: 0.25em ;
    position: absolute ;
    border-radius: 2em ;
    transform-origin: left center ;
    background-color: currentColor ;
    width: calc( var(--lineWidth) + 5px ) ;
    transform: translate3d(3em , 0, 0) scaleX(0) ;
    transition: transform calc( var(--duration) + .2s) var(--cubic) ;

}


.menu__text {

    left: 4.15em ;
    font-size: 1.5em ;
    position: absolute ;
    text-transform.........完整代码请登录后点击上方下载按钮下载查看