svg+css布局实现radio单选切换代码-html代码-BFW代码库

svg+css布局实现radio单选切换代码

代码语言：html

代码描述：svg+css布局实现radio单选切换代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
    Helvetica, Arial, sans-serif, system-ui;
  background: hsl(0 0% 4%);
  color: hsl(0 0% 100%);
}

.controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 100px;
  background: radial-gradient(circle at 0 50%, hsl(215 99% 67%), transparent)
      border-box,
    hsl(239 100% 75%);
  border: 4px solid transparent;
  padding-left: 0.5rem;
  position: relative;
  color: hsl(0 0% 4%);
  &::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 100px;
    pointer-events: none;
    box-shadow: 0 1px inset hsl(0 0% 100% / 0.5),
      0 -1px inset hsl(0 0% 0% / 0.5);
  }

  & button {
    width: 40px;
    aspect-ratio: 1;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s;
    &:hover {
      background: hsl(215, 99%, 58%);
    }

    & svg {
      width: 32px;
      fill: currentColor;
    }
  }

  & .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    cursor: pointer;

    & .tabs__indicator {
      position: absolute;
      width: 50%;
      height: 100%;
      background: black;
      border-radius: 100px;
      overflow: hidden;
      transition: translate 0.25s;
      pointer-events: none;
      & .tabs__track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 200%;
        color: white;
        transition: translate 0.25s;
      }
    }
  }

  & .divider {
    width: 2px;
    height: 24px;
    background: currentColor;
    margin-right: 0.5rem;
  }

  & input:focus-visible ~ .tabs__indicator {
    outline: 2px solid hsl(239 100% 95%);
    outline-offset: 2px;
  }

  & label {
    font-size: 1.35rem;
    font-weig.........完整代码请登录后点击上方下载按钮下载查看