css使用has来实现滑动导航条效果代码-html代码-BFW代码库

css使用has来实现滑动导航条效果代码

代码语言：html

代码描述：css使用has来实现滑动导航条效果代码，没有使用js实现，纯粹css代码。

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  background-color: hsl(200, 50%, 10%);
  color: hsl(200, 50%, 70%);
  font-family: sans-serif;
}

ul {
  display: flex;
  gap: 0 2rem;
  margin: 0;
  padding: 0.5rem 1rem 0.3rem 1rem;
  position: relative;
  border-radius: 0.5rem;
  list-style: none;
  background-color: hsl(200, 50%, 30%);
  isolation: isolate;
}

ul:after {
  content: "";
  display: block;
  width: 20%;
  height: 100%;
  position: absolute;
  left: var(--left, 0%);
  top: 0;
  background-color: hsl(200, 50%, 50%);
  border-radius: 0.5rem;
  z-index: -1;
  transition: left 0.2s ease;
}

ul:has(#one:checked):after {
  --left: 0%;
}

ul:has(#two:checked):after {
  --left: 20%;
}

ul:has(#three:checked):after {
  --left: 40%;
}

ul:has(#four:checked):after {
  --left: 60%;
}

ul:has(#five:checked):after {
  --left: 80%;
}

input[type="radio"] {
  display: none;
}

svg {
  height: 8vmin;
  fill: hsl(200, 50%, 80%);
  trasition: fill 0.2s ease;
}

:checked + label svg {
  fill: hsl(200, 50%, 15%);
}
</style>



</head>

<body  >
  <ul>
  <li>
    <input type="radio" name="item" id="one" checked>
    <label for="one">
      <svg viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M18,5V3a1,1,0,0,0-2,0V5H8V3A1,1,0,0,0,6,3V5H2V21H22V5Zm2,14H4V7H20ZM9,10H7v2H9Zm4,0H11v2h2Zm4,0H15v2h2ZM9,14H7v2H9Zm4,0H11v2h2Zm4,0H15v2h2Z"/></svg>
    </label>
  </li>
  <li>
    <input type="radio" name="item" id="two">
    <label for="two">
      <svg viewBox="0 0 24 24" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><title/><path d="M12,4a9,9,0,1,0,9,9A9,9,0,0,0,12,4Zm0,16a7,7,0,1,1,7-7A7,7,0,0,1,12,20ZM21.19,3.81A12.88,12.88,0,0,0,17.06,1l-.78,1.84a11.08,11.08,0,0,1,3.5,2.36,11.43,11.43,0,0,1,1.87,2.49l1.75-1A13.19,13.19,0,0,.........完整代码请登录后点击上方下载按钮下载查看