css+div实现跟随滑动式tab图标菜单点击切换效果代码-html代码-BFW代码库

css+div实现跟随滑动式tab图标菜单点击切换效果代码

代码语言：html

代码描述：css+div实现跟随滑动式tab图标菜单点击切换效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  
  
  
<style>
body{
  min-height: 100svh;
  background-color: #222;
  display: grid;
  place-content: center;
}

nav{
  --_w: 100px;
  --_padding: 1rem;
  display: flex;
  border: 1px solid #FFFFFF40;
  border-radius: 20px;
  padding-inline: var(--_padding);
  background-color: #000;
  position: relative;
    isolation: isolate;
}

button{
  border:none;
  padding: none;
  background: transparent;
  color: #FFF;
  cursor: pointer;
  font-size: 3rem;
  width: var(--_w);
  aspect-ratio: 1;
opacity: 0.5;
  transition: opacity 300ms ease-in-out;
  outline: 1px dashed red;
  display: grid;
  place-content: center;

}
button.active,
button:hover{
  opacity: 1;
}
nav::before{
  content: '';
  position: absolute;
  top: -25%;
  left: var(--_padding);
  width: var(--_w);
  aspect-ratio: 2/3;
  background-color: #000;
  border-radius: 999px;
  transform: translateX(calc(var(--translate-value, 0) * 100%));
  transition: transform 300ms ease-in-out;
  z-index: -1;
  border-top: 1px solid #FFFFFF40;
  border-bottom: 1px solid #FFFFFF40;
}


nav:has(b.........完整代码请登录后点击上方下载按钮下载查看