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::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    inset: -1px;
    background: var(--accent);
    -webkit-mask: radial-gradient(
      circle at center,
      #0000 var(--radius),
      #000 var(--radius)
    );
            mask: radial-gradient(
      circle at center,
      #0000 var(--radius),
      #000 var(--radius)
    );
    -webkit-clip-path: inset(50% 50% 0 0);
            clip-path: inset(50% 50% 0 0);
  }

  .indicator__debug {
    display: none;
  }

  [data-debug='true'] .indicator__debug {
    display: block;
    outline: 2px dashed red;
    outline-offset: 2px;
    left: 100%;
    z-index: 10;
  }

  .tabs {
    transition: scale 0.2s;
  }

  [data-debug='true'] .tabs {
    scale: 5;
  }

  .indicator__debug::after {
    content: '';
    position: absolute;
    inset: 0;
    border: calc(var(--border-width) * 1px) solid red;
    border-bottom-color: var(--border-color);
    rotate: 45deg;
    border-radius: 50%;
  }

  [data-debug='true'] .indicator__part--right::before {
    background: red;
  }

  .indicator__part::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border: calc(var(--border-width) * 1px) solid var(--border-color);
    border-radius: 50%;
    -webkit-clip-path: inset(50% 50% 0 0);
            clip-path: inset(50% 50% 0 0);
  }

  .indicator__part--left {
    right: 100%;
    scale: -1 1;
  }
  .indi.........完整代码请登录后点击上方下载按钮下载查看