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 {
   .........完整代码请登录后点击上方下载按钮下载查看