css布局实现一个三维老式台式电风扇调速开关交互动画效果代码-html代码-BFW代码库

css布局实现一个三维老式台式电风扇调速开关交互动画效果代码

代码语言：html

所属分类：三维

代码描述：css布局实现一个三维老式台式电风扇调速开关交互动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<style>
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
:root {
  --blade-speed: 1;
  --rotation: 25;
  --fan-speed: 2;
  --state: running;
  --bg: #344c65;
  --shade-one: #f2f2f2;
  --shade-two: #e6e6e6;
  --shade-three: #d9d9d9;
  --shade-four: #ccc;
  --shade-five: #bfbfbf;
  --shade-six: #b3b3b3;
  --shade-seven: #a6a6a6;
  --shade-eight: #999;
  --cage-one: rgba(255,255,255,0.4);
  --cage-two: rgba(255,255,255,0.2);
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  transform: scale(0.75);
}
img {
  height: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 1px);
  filter: grayscale(1);
  opacity: 0.5;
}
input[type="radio"] {
  position: fixed;
  top: 0;
  left: 100%;
  opacity: 0;
}
#zero:checked ~ .scene {
  --blade-speed: 0;
  --state: paused;
}
#zero:checked ~ .scene .fan__stalk {
  transform: translate(-50%, 25%);
}
#one:checked ~ .scene {
  --blade-speed: 1;
  --state: running;
}
#one:checked ~ .scene .fan__control:nth-of-type(2) {
  transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
  transform: translate(0, 50%);
}
#two:checked ~ .scene {
  --blade-speed: 0.5;
  --state: running;
}
#two:checked ~ .scene .fan__control:nth-of-type(3) {
  transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
  transform: translate(0, 50%);
}
#three:checked ~ .scene {
  --blade-speed: 0.25;
  --state: running;
}
#three:checked ~ .scene .fan__control:nth-of-type(4) {
  transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
  transform: translate(0, 50%);
}
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg).........完整代码请登录后点击上方下载按钮下载查看