css实现中性checkbox复选框美化效果代码-html代码-BFW代码库

css实现中性checkbox复选框美化效果代码

代码语言：html

代码描述：css实现中性checkbox复选框美化效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
  font-weight: 100 1000;
}
@layer properties {
  @property --checkbox-color-hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --checkbox-color-saturation {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --checkbox-color-lightness {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --checkbox-color-light-lightness {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --icon-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --icon-invert {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --icon-size {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --negative-shadow-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --text-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
:root {
  /* -- Colors: */
  --body-bg-color: hsl(221deg 16% 12%);
  --checkbox-color-hue: 216;
  --checkbox-color-saturation: 17;
  --checkbox-color-lightness: 15;
  --checkbox-color: hsl(
      calc(var(--checkbox-color-hue) * 1deg) /**/
      calc(var(--checkbox-color-saturation) * 1%) /**/
      calc(var(--checkbox-color-lightness) * 1%) /**/
  );
  --checkbox-color-light: rgba(255 255 255 / 32%);
  --checkbox-color-dark: rgba(0 0 0 / 45%);
  /* -- Box */
  --checkbox-border-radius: 24%;
  --checkbox-width: 36;
  --checkbox-height: 36;
  --text-opacity: 0.6;
  --negative-shadow-offset: 500;
  --active-shadow-opacity: 0;
  /* -- icon */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' class='feather feather-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-opacity: 0;
  --icon-size: 1;
  /* -- easing */
  --cubic-bezier: cubic-bezier(0.6, -1.2, 0.2, 2.2);
  /* -- misc */
  --debug: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  /* debug */
  outline: calc(var(--debug) * 1px) dashed red;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: var(--body-bg-color);
  display: grid;
  place-items: center;
  font-family: "Mona Sans", sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  grid-gap: 0.8em;
  transform: scale(1);
}

label[for*=checkbox] {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 8px;
  /* text settings */
  color: rgba(255 255 255/var(--text-opacity));
  font-size: 1.6em;
  letter-spacing: 0.1em;
  font-weight: 400;
  transition: --text-opacity 0.2s ease;
  /* label:after */
  /* label input[type="checkbox"] */
}
label[for*=checkbox]:hover {
  --text-opacity: 1;
}
label[for*=checkbox]:hover:after {
  --icon-opacity: .50;
  --icon-invert: 100;
  --icon-size: .........完整代码请登录后点击上方下载按钮下载查看