div+css实现三维逼真可调节风速摇头老式电风扇效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维逼真可调节风速摇头老式电风扇效果代码，三档调节还有开关，顶部有摇头按钮，可交互操作。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>


@layer normalize, base, demo;

@layer demo {
  *,
  *:after,
  *:before {
    transform-style: preserve-3d;
  }

  :root {
    --size: 30;
    --width: calc(var(--size) * 1vmin);
    --height: calc(var(--width) * 1.75vmin);
    --blade-speed: 1;
    --rotation: 25;
    --fan-speed: 2;
    --accent: hsl(25 80% 60%);
    --state: running;
    --light: color-mix(in lch, canvas, canvasText 10%);
    --dark: color-mix(in lch, canvasText, canvas 25%);
    --color: light-dark(var(--light), var(--dark));
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  body {
    overflow-x: hidden;
    background: light-dark(canvas, canvas);
  }

  .fan svg {
    height: 15%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 1px);
    filter: grayscale(1);
    opacity: 0.5;
  }

  :root:has(#zero:checked) {
    --blade-speed: 0;
    --state: paused;
  }

  :root:has(#one:checked) {
    --blade-speed: 1;
  }

  :root:has(#one:checked) .fan__control:nth-of-type(2),
  :root:has(#two:checked) .fan__control:nth-of-type(3),
  :root:has(#three:checked) .fan__control:nth-of-type(4) {
    transition: transform 0.1s cubic-bezier(0, 1.4, 0.2, 1.4);
    transform: translate(0, 50%);
  }

  :root:has(#two:checked) {
    --blade-speed: 0.5;
  }

  :root:has(#three:checked) {
    --blade-speed: 0.25;
  }

  /* 3D Stuff */
  .cuboid {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .cuboid__side {
    filter: brightness(var(--b, 1));
  }

  .cuboid__side:nth-of-type(1) {
    --b: 1;
    height: calc(var(--thickness) * 1vmin);
    width: 100%;
    position: absolute;
    top: 0;
    transform: translate(0, -50%) rotateX(90deg);
  }

  .cuboid__side:nth-of-type(2) {
    --b: 1;
    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) {
    --b: 0.5;
    width: 100%;
    height: calc(var(--thickness) * 1vmin);
    position: absolute;
    bottom: 0;
    transform: translate(0%, 50%) rotateX(90deg);
  }

  .cuboid__side:nth-of-type(4) {
    --b: 0.75;
    height: 100%;
    width: calc(var(--thickness) * 1vmin);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
  }

  .cuboid__side:nth-of-type(5) {
    --b: 0.9;
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
    position: absolute;
    top: 0;
    left: 0;
  }

  .cuboid__side:nth-of-type(6) {
    --bg: 0;
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin))
      rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Sizing */
  :root {
    --width: 30vmin;
    --height: calc(var(--width) * 1.75);
  }

  label {
    cursor: pointer;
  }
  .fan__controls label {
    transition: transform 0.1s;
  }

  .fan__controls label:hover {
    transform: translate(0, 20%);
  }

  .fan__controls label:active {
    transform: translate(0, 40%);
  }

  .scene {
    position: absolute;
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0vmin) rotateX(-24deg) rotateY(34deg)
      rotateX(90deg);
  }

  .fan {
    height: var(--height);
    width: var(--width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(-90deg)
      rotateX(calc(var(--rotateX, 0) * 1deg))
      rotateY(calc(var(--rotateY, 0) * 1deg));
  }

  .fan__base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 8%;
    width: 80%;
  }

  .fan__controls {
    height: 6%;
    width: 50%;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translate3d(-50%, 0, calc(var(--size) * 0.3vmin));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6%;
  }

  .fan__housing {
    height: 150%;
    width: 150%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate3d(-50%, -50%, calc(var(--size) * 0.45vmin));
  }

  .fan__housing-rear,
  .fan__housing-front {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80%;
    width: 80%;
    border-radius: 50%;
  }

  .fan__housing-front {
    transform: translate3d(-50%, -50%, calc(var(--size) * 0.11vmin));
  }

  .fan__housing-front:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: 35%;
    width: 35%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .fan__housing-rear {
    transform: translate3d(-50%, -50%, calc(var(--size) * -0.1vmin));
  }

  .fan__head {
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    position: absolute;
    top: 0;
    left: 0;
    tr.........完整代码请登录后点击上方下载按钮下载查看