css+js实现可调节参数滑动式tab切换radio单选效果代码-html代码-BFW代码库

css+js实现可调节参数滑动式tab切换radio单选效果代码

代码语言：html

所属分类：选项卡

代码描述：css+js实现可调节参数滑动式tab切换radio单选效果代码

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

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

@layer normalize, base, demo;

@layer demo {
  :root {
    color-scheme: light only;
    --accent: hsl(0 0% 85%);
    --border-color: hsl(0 0% 70%);
    --radius: calc(var(--rad, 12) * 1px);
    --border-width: 1;
  }

  body {
    overflow: hidden;
  }

  .tabs {
    scale: 1.5;
  }

  .tabs ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .tabs label {
    display: grid;
    place-items: center;
    width: 100px;
    height: 48px;
    cursor: pointer;
    font-weight: 300;
    letter-spacing: 0.875px;
  }

  .indicator {
    border: calc(var(--border-width) * 1px) solid var(--border-color);
    border-bottom-color: var(--accent);
  }
  .tabs::before {
    content: '';
    height: calc(var(--border-width) * 1px);
    z-index: -1;
    width: calc(100% + (2 * var(--radius)));
    left: calc(var(--radius) * -1);
    position: absolute;
    bottom: 0;
    background: var(--border-color);
    z-index: -4;
  }

  .tabs {
    position: absolute;
  }

  .indicator {
    position: absolute;
    height: 100%;
    width: 20%;
    background: var(--accent);
    z-index: -1;
    left: 0%;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .indicator__part,
  .indicator__debug {
    width: calc(var(--radius) * 2);
    aspect-ratio: 1;
    position: absolute;
    bottom: calc(var(--border-width) * -1px);
  }

  .indicator__part::befo.........完整代码请登录后点击上方下载按钮下载查看