3D开关按钮

下载代码

html

css

分享到微信朋友圈

html

css

* {
  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);
}

input[type=checkbox] {
  position: fixed;
  top: -1.5em;
  left: -1.5em;
}
input[type=checkbox]:checked + .surface {
  box-shadow: 0 0 1em var(--onColor);
}
input[type=checkbox]:checked + .surface, input[type=checkbox]:checked + .surface .cube__front, input[type=checkbox]:checked + .surface .cube__left, input[type=checkbox]:checked + .surface .cube__top {
  background-color: var(--onColor);
}
input[type=checkbox]:checked + .surface .cube__front {
  transform: rotateX(-90deg) scaleY(0.25);
}
input[type=checkbox]:checked + .surface .cube__left {
  transform: rotateY(-90deg) scaleX(0.25);
}
input[type=checkbox]:checked + .surface .cube__top {
  transform: translateZ(0.5em);
}
input[type=checkbox]:checked + .surface .cube__reflection {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 67% 100%, 0 33%);
}
input[type=checkbox]:checked + .surface .cube:nth-child(2) .cube__front {
  transform: rotateX(-90deg);
}
input[type=checkbox]:checked + .surface .cube:nth-child(2) .cube__left {
  transform: rotateY(-90deg);
}
input[type=checkbox]:checked + .surface .cube:nth-child(2) .cube__top {
  transform: translateZ(2em);
}

.label-text {
  top: calc(100% + 0.5em);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #2e3138;
    color: #e3e4e8;
  }

.cube__reflection {
    opacity: 0.08;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg