纯css立体checkbox选中效果-html代码-BFW代码库

纯css立体checkbox选中效果

代码语言：html

代码描述：纯css立体checkbox选中效果，三维块状

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


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

<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dur: 0.3s;
  --timing: cubic-bezier(0.3,1.7,0.6,0.6);
  --offColor: #2d7a06;
  --onColor: #6af425;
  font-size: calc(40px + (80 - 40)*(100vw - 320px)/(2560 - 320));
}

body {
  background-color: #e3e4e8;
  color: #17181c;
  font: 1em/1.5 "Helvetica Neue", Helvetica, sans-serif;
  overflow-x: hidden;
}

form {
  display: flex;
  height: 100vh;
}

.surface, .cube__front, .cube__left, .cube__top {
  background-color: var(--offColor);
}

.surface, .surface span {
  display: block;
}

.surface, .cube {
  transform-style: preserve-3d;
}

.surface {
  box-shadow: 0 0 1em transparent;
  transition: all var(--dur) ease-out;
  cursor: pointer;
  margin: auto;
  position: relative;
  transform: rotateX(45deg) rotateZ(-45deg) translateY(-0.5em);
  width: 4em;
  height: 2em;
  -webkit-tap-highlight-color: transparent;
}

.cube, .cube span, .label-text {
  position: absolute;
  left: 0;
}

.cube, .cube span {
  top: 0;
}
.cube__front, .cube__left, .cube__top, .cube__reflection {
  height: 2em;
  width: 2em;
}
.cube__front, .cube__left, .cube__top {
  transition: background-color var(--dur) ease-out, transform var(--dur) var(--timing);
}
.cube__front {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  transform: rotateX(-90deg);
  transform-origin: 50% 100%;
}
.cube__left {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  transform: rotateY(-90deg);
  transform-origin: 0 50%;
}
.cube__top {
  transform: translateZ(2em);
}
.cube__reflection {
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 100%);
  opacity: 0.04;
  transform: rotate(45deg) scale(0.707);
  transform-origin: 0 0;
  transition: clip-path var(--dur) var(--timing), -webkit-clip-path var(--dur) var(--timing);
}
.cube:nth-child(2) {
  transform: translate(2em, 0);
}
.cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}
.cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}
.cube:nth-child(2) .cube__top {
  transform: translateZ(0.5em);
}
.........完整代码请登录后点击上方下载按钮下载查看