css实现中性化设计表单控件集合代码-html代码-BFW代码库

代码语言：html
代码描述：css实现中性化设计控件集合代码，包含时钟、播放暂停、搜索、tab选项卡、导航、滑竿、开关、勾选、按钮、单选等UI组件。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">


    <style>
        :root {
          --primary-light: #8abdff;
          --primary: #6d5dfc;
          --primary-dark: #5b0eeb;
          --white: #FFFFFF;
          --greyLight-1: #E4EBF5;
          --greyLight-2: #c8d0e7;
          --greyLight-3: #bec8e4;
          --greyDark: #9baacf;
        }
        
        *, *::before, *::after {
          margin: 0;
          padding: 0;
          box-sizing: inherit;
        }
        
        html {
          box-sizing: border-box;
          font-size: 62.5%;
          overflow-y: scroll;
          background: var(--greyLight-1);
        }
        @media screen and (min-width: 900px) {
          html {
            font-size: 75%;
          }
        }
        
        .container {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "Poppins", sans-serif;
          background: var(--greyLight-1);
        }
        
        .components {
          width: 75rem;
          height: 40rem;
          border-radius: 3rem;
          box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);
          padding: 4rem;
          display: grid;
          grid-template-columns: 17.6rem 19rem 20.4rem;
          grid-template-rows: repeat(autofit, -webkit-min-content);
          grid-template-rows: repeat(autofit, min-content);
          grid-column-gap: 5rem;
          grid-row-gap: 2.5rem;
          align-items: center;
        }
        
        /*  SWITCH  */
        .switch {
          grid-column: 1/2;
          display: grid;
          grid-template-columns: repeat(2, -webkit-min-content);
          grid-template-columns: repeat(2, min-content);
          grid-gap: 3rem;
          justify-self: center;
        }
        .switch input {
          display: none;
        }
        .switch__1, .switch__2 {
          width: 6rem;
        }
        .switch__1 label, .switch__2 label {
          display: flex;
          align-items: center;
          width: 100%;
          height: 3rem;
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          background: rgba(255, 255, 255, 0);
          position: relative;
          cursor: pointer;
          border-radius: 1.6rem;
        }
        .switch__1 label::after, .switch__2 label::after {
          content: "";
          position: absolute;
          left: 0.4rem;
          width: 2.1rem;
          height: 2.1rem;
          border-radius: 50%;
          background: var(--greyDark);
          transition: all 0.4s ease;
        }
        .switch__1 label::before, .switch__2 label::before {
          content: "";
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background: linear-gradient(330deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
          opacity: 0;
          transition: all 0.4s ease;
        }
        .switch input:checked ~ label::before {
          opacity: 1;
        }
        .switch input:checked ~ label::after {
          left: 57%;
          background: var(--greyLight-1);
        }
        
        /*  CHECKBOX  */
        .checkbox {
          grid-column: 1/2;
          display: grid;
          grid-template-columns: repeat(2, 6rem);
          grid-gap: 3rem;
          justify-content: center;
        }
        .checkbox input {
          display: none;
        }
        .checkbox__1, .checkbox__2 {
          width: 6rem;
          display: flex;
          justify-content: center;
        }
        .checkbox__1 label, .checkbox__2 label {
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          cursor: pointer;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0.5rem;
          width: 2.8rem;
          height: 2.8rem;
        }
        .checkbox__1 label:hover i, .checkbox__2 label:hover i {
          color: var(--primary);
        }
        .checkbox__1 label i, .checkbox__2 label i {
          font-size: 1.8rem;
          font-weight: 700;
          color: var(--greyDark);
          transition: 0.3s ease;
        }
        .checkbox__1 input:checked ~ label, .checkbox__2 input:checked ~ label {
          box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        }
        .checkbox__1 input:checked ~ label i, .checkbox__2 input:checked ~ label i {
          color: var(--primary);
        }
        
        /*  RADIO  */
        .radio {
          grid-column: 1/2;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          justify-items: center;
        }
        .radio input {
          display: none;
        }
        .radio__1 input:checked ~ label, .radio__2 input:checked ~ label {
          box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        }
        .radio__1 input:checked ~ label::after, .radio__2 input:checked ~ label::after {
          background: var(--primary);
        }
        .radio__1 label, .radio__2 label {
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          width: 2.8rem;
          height: 2.8rem;
          border-radius: 50%;
        }
        .radio__1 label:hover::after, .radio__2 label:hover::after {
          background: var(--primary);
        }
        .radio__1 label::after, .radio__2 label::after {
          content: "";
          position: absolute;
          width: 1.4rem;
          height: 1.4rem;
          background: var(--greyDark);
          border-radius: 50%;
          transition: 0.3s ease;
        }
        
        /*  BUTTONS  */
        .btn {
          width: 15rem;
          height: 4rem;
          border-radius: 1rem;
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          justify-self: center;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: 0.3s ease;
        }
        .btn__primary {
          grid-column: 1/2;
          grid-row: 4/5;
          background: var(--primary);
          box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          color: var(--greyLight-1);
        }
        .btn__primary:hover {
          color: var(--white);
        }
        .btn__primary:active {
          box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);
        }
        .btn__secondary {
          grid-column: 1/2;
          grid-row: 5/6;
          color: var(--greyDark);
        }
        .btn__secondary:hover {
          color: var(--primary);
        }
        .btn__secondary:active {
          box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        }
        .btn p {
          font-size: 1.6rem;
        }
        
        /*  CLOCK  */
        .clock {
          grid-column: 2/3;
          grid-row: 1/3;
          width: 12rem;
          height: 12rem;
          justify-self: center;
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        .clock .hand {
          position: absolute;
          transform-origin: bottom;
          bottom: 6rem;
          border-radius: 0.2rem;
          z-index: 200;
        }
        .clock .hours {
          width: 0.4rem;
          height: 3.2rem;
          background: var(--greyLight-3);
        }
        .clock .minutes {
          width: 0.4rem;
          height: 4.6rem;
          background: var(--greyDark);
        }
        .clock .seconds {
          width: 0.2rem;
          height: 5.2rem;
          background: var(--primary);
        }
        .clock .point {
          position: absolute;
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 50%;
          background: var(--primary);
          z-index: 300;
        }
        .clock .marker {
          width: 95%;
          height: 95%;
          border-radius: 50%;
          position: relative;
          box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
        }
        .clock .marker::after {
          content: "";
          width: 60%;
          height: 60%;
          position: absolute;
          box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
          border-radius: 50%;
          top: 20%;
          left: 20%;
          filter: blur(1px);
        }
        .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {
          position: absolute;
          border-radius: 0.1rem;
          box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);
        }
        .clock .marker__1, .clock .marker__2 {
          width: 0.2rem;
          height: 0.6rem;
          left: 5.6rem;
        }
        .clock .marker__3, .clock .marker__4 {
          width: 0.6rem;
          height: 0.2rem;
          top: 5.6rem;
        }
        .clock .marker__1 {
          top: 2%;
        }
        .clock .marker__2 {
          top: 98%;
          transform: translateY(-0.6rem);
        }
        .clock .marker__3 {
          left: 2%;
        }
        .clock .marker__4 {
          left: 98%;
          transform: translateX(-0.6rem);
        }
        
        /*  CHIP  */
        .chip {
          grid-column: 2/3;
          grid-row: 3/4;
          justify-self: center;
          width: 17rem;
          height: 4rem;
          border-radius: 1rem;
          box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--wh.........完整代码请登录后点击上方下载按钮下载查看