css实现三维白天夜晚程序员房间电脑桌椅子布局效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现三维白天夜晚程序员房间电脑桌椅子布局效果代码，可播放音乐、黑夜白昼切换、放大电脑桌面、椅子自动选择等效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">


  
  
<style>
* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
:root {
  --blur: 1vmin;
  --perspective: 2000;
  --rotate-x: -20;
  --rotate-y: -45;
  --plane-height: 50;
  --plane-width: 50;
  --dark: 0;
  --zoomed: 0;
  --scale: calc(0.75 + (var(--zoomed) * 4));
  --wall-thickness: 4;
  --cm: calc((var(--plane-height) / 240));
  --transition: 0.2s;
  --floor-shade-one: #8f663d;
  --floor-shade-two: #c29970;
  --floor-shade-three: #e0ccb8;
  --windowsill-shade-one: #bf8a40;
  --windowsill-shade-two: #996f33;
  --windowsill-shade-three: #735326;
  --wall-shade-one: #fafafa;
  --wall-shade-two: #f2f2f2;
  --wall-shade-three: #e6e6e6;
  --wall-shade-four: #d9d9d9;
  --skirting-one: #ededed;
  --skirting-two: #e0e0e0;
  --fade-one: #f7baba;
  --fade-two: #bae3f7;
  --fade-three: #e3baf7;
  --fade-four: #baf7ba;
  --cube: #f2f2f2;
  --leg-one: #1a1a1a;
  --leg-two: #1f1f1f;
  --leg-three: #242424;
  --leg-four: #292929;
  --rug: #0f1924;
  --peripheral-one: #333;
  --peripheral-two: #4d4d4d;
  --peripheral-three: #666;
  --peripheral-four: #808080;
  --mac-one: #ccc;
  --mac-two: #b3b3b3;
  --blind: #f2e6d9;
  --mac-three: #999;
  --pot-one: #bf6a40;
  --pot-two: #953;
  --pot-three: #734026;
  --chair-one: #000;
  --chair-two: #1a1a1a;
  --chair-three: #333;
  --chair-four: #4d4d4d;
  --chair-accent-one: #f2f2f2;
  --chair-accent-two: #d65c5c;
  --bg: #d1e5fa;
  --light: #ccc;
  --icon: #69c;
}
audio {
  display: none;
}
body {
  min-height: 100vh;
  overflow: hidden;
}
.dg.ac {
  z-index: 100;
  transform: translate3d(0, 0, 50vmin);
}
[type="checkbox"] {
  position: absolute;
  left: 100%;
  opacity: 0;
  height: 0;
  width: 0;
}
label {
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  cursor: pointer;
  transform: translate3d(0, 0, 50vmin) translate(0, calc((var(--index) * -100%) + (var(--index) * -10px)));
}
svg {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
path {
  fill: var(--icon);
}
[for='spin'] {
  --index: 0;
}
[for='dark'] {
  --index: 1;
}
[for='audio'] {
  --index: 2;
}
[for='zoom'] {
  --index: 3;
}
#spin:checked ~ .scene__wrapper {
  --spin: 1;
}
#zoom:checked ~ .scene__wrapper {
  --zoomed: 1;
  --scale: 4.75;
}
#zoom:checked ~ label:not([for='zoom']) {
  display: none;
}
#zoom:checked + label {
  background: #fff;
}
#dark:checked ~ .scene__wrapper .light-cube div,
#dark:checked ~ .scene__wrapper .light-cube:after {
  -webkit-animation: fade 10s calc(2 * var(--transition)) infinite linear;
          animation: fade 10s calc(2 * var(--transition)) infinite linear;
}
@-webkit-keyframes fade {
  0%, 100% {
    background: var(--fade-one);
  }
  25% {
    background: var(--fade-two);
  }
  50% {
    background: var(--fade-three);
  }
  75% {
    background: var(--fade-four);
  }
}
@keyframes fade {
  0%, 100% {
    background: var(--fade-one);
  }
  25% {
    background: var(--fade-two);
  }
  50% {
    background: var(--fade-three);
  }
  75% {
    background: var(--fade-four);
  }
}
#dark:checked ~ .scene__wrapper .light-cube:after {
  filter: blur(var(--blur));
}
#dark:checked ~ .scene__wrapper .wall--left div:nth-of-type(3):after {
  opacity: 1;
}
#dark:checked ~ .scene__wrapper .wall--right-right div:nth-of-type(1):after,
#dark:checked ~ .scene__wrapper .shelf div:nth-of-type(5):after {
  -webkit-animation: fade 10s calc(2 * var(--transition)) infinite linear;
          animation: fade 10s calc(2 * var(--transition)) infinite linear;
}
#dark:checked ~ .scene__wrapper .jfdi div:nth-of-type(3):after {
  color: #ccc;
}
#dark:checked ~ .scene__wrapper .jfdi div:nth-of-type(4):after {
  transition: transform var(--transition) var(--transition);
  transform: translate(-8%, -16%);
}
#dark:checked ~ .scene__wrapper .windowsill div:nth-of-type(1),
#dark:checked ~ .scene__wrapper .windowsill div:nth-of-type(5),
#dark:checked ~ .scene__wrapper .floor div:nth-of-type(5) {
  filter: brightness(0.25);
}
#dark:checked ~ .scene__wrapper .plant__plant {
  filter: brightness(0.5);
}
#dark:checked ~ .scene__wrapper .chair__back div:nth-of-type(3):after {
  filter: brightness(0.25);
}
#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(1) {
  filter: brightness(0.1);
}
#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(3) {
  filter: brightness(0.3);
}
#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(5) {
  filter: brightness(0.2);
}
#dark:checked ~ .scene__wrapper .bear-canvas div {
  filter: brightness(0.35);
}
#dark:checked ~ .scene__wrapper .bear-canvas div:nth-of-type(1) {
  filter: brightness(0.35) grayscale(1);
}
#dark:checked ~ .scene__wrapper .rug div:nth-of-type(5) {
  filter: brightness(0.25);
}
#zoom:checked ~ .scene__wrapper .scene,
#zoom:checked ~ .scene__wrapper .studio,
#zoom:checked ~ .scene__wrapper .plane {
  transition: transform var(--transition);
}
#zoom:checked ~ .scene__wrapper .chair {
  transition: opacity var(--transition);
}
#dark:checked ~ .scene__wrapper {
  --dark: 1;
  --floor-shade-one: #241a0f;
  --floor-shade-two: #47331f;
  --floor-shade-three: #6b4d2e;
  --windowsill-shade-one: #735326;
  --windowsill-shade-two: #4d3719;
  --windowsill-shade-three: #261c0d;
  --wall-shade-one: #616161;
  --wall-shade-two: #595959;
  --wall-shade-three: #4d4d4d;
  --wall-shade-four: #404040;
  --skirting-one: #545454;
  --skirting-two: #474747;
  --fade-one: #f7baba;
  --fade-two: #bae3f7;
  --fade-three: #e3baf7;
  --fade-four: #baf7ba;
  --leg-one: #0d0d0d;
  --leg-two: #0f0f0f;
  --leg-three: #121212;
  --leg-four: #141414;
  --rug: #0f1924;
  --peripheral-one: #1a1a1a;
  --peripheral-two: #262626;
  --peripheral-three: #333;
  --peripheral-four: #404040;
  --mac-one: #333;
  --mac-two: #2e2e2e;
  --mac-three: #262626;
  --pot-one: #734026;
  --pot-two: #4d2b19;
  --blind: #4d3319;
  --pot-three: #26150d;
  --chair-one: #000;
  --chair-two: #0d0d0d;
  --chair-three: #1a1a1a;
  --chair-four: #262626;
  --chair-accent-one: #666;
  --chair-accent-two: #7a1f1f;
  --bg: #05192e;
  --cube: #666;
  --light: #fff;
  --icon: #0f4c8a;
}
:checked + label svg:last-of-type {
  display: block;
}
:checked + label svg:first-of-type {
  display: none;
}
label svg:last-of-type {
  display: none;
}
.scene {
  perspective: calc(var(--perspective, 800) * 1px);
  transform-style: preserve-3d;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--scale)) translate3d(0, 0, 50vmin);
}
.scene__wrapper {
  transition: background var(--transition);
  background: var(--bg);
}
.plane {
  height: calc(var(--plane-height, 25) * 1vmin);
  width: calc(var(--plane-width, 25) * 1vmin);
  transform-style: preserve-3d;
  transform: rotateX(calc((var(--rotate-x, -24) - (var(--zoomed) * var(--rotate-x, -24))) * 1deg)) rotateY(calc(((var(--rotate-y, -24) - (var(--zoomed) * var(--rotate-y, -24))) + (var(--zoomed) * -90)) * 1deg)) rotateX(90deg) translate3d(0, 0, 0);
}
.plane:before {
  content: '';
  background: rgba(0,0,0,0.5);
  filter: blur(var(--blur));
  height: 112%;
  width: 112%;
  position: absolute;
  top: -8%;
  left: -10%;
  transform: translate3d(0, 0, -11vmin);
  z-index: -1;
}
.cuboid {
  --width: var(--cuboid-width, 15);
  --height: var(--cuboid-height, 10);
  --depth: var(--cuboid-depth, 4);
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  transform: rotateZ(calc(var(--starting-rotation, 0) * 1deg)) translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
  transform-style: preserve-3d;
}
.cuboid__side {
  transform-style: preserve-3d;
}
.cuboid > div:nth-of-type(1) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}
.cuboid > div:nth-of-type(2) {
  height: calc(var(--height) * 1vmin);
  width: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(3) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(4) {
  height: calc(var(--height) * 1vmin);
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
  position: absolute;
  top: 50%;
  left: 50%;
}
.cuboid > div:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
  position: absolute;
  top: 50%;
  left: 50%;
}
.studio {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc((-10 + (var(--zoomed) * -10)) * 1vmin));
}
.floor {
  --height: 1;
  --width: calc(50 + var(--wall-thickness));
  --depth: calc(50 + var(--wall-thickness));
  --z: -0.5;
  --y: calc(var(--wall-thickness) * -1);
  --x: calc(var(--wall-thickness) * -1);
  transition: background var(--transition);
}
.floor div:not(.studio__shadow) {
  background: var(--floor-shade-three);
}
.floor div:nth-of-type(1) {
  background: var(--floor-shade-one);
}
.floor div:nth-of-type(3) {
  background: var(--floor-shade-two);
}
.floor div:nth-of-type(5) {
  transition: filter var(--transition);
  filter: brightness(1);
}
.floor div:nth-of-type(5):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: rotate(90deg);
  background: url("https://images.pexels.com/photos/235994/pexels-photo-235994.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") 0 0/15vmin 15vmin;
}
.wall {
  transition: background var(--transition);
}
.wall--left {
  --height: calc(220 * var(--cm));
  --width: var(--wall-thickness);
  --depth: calc((240 * var(--cm)) + var(--wall-thickness));
  --z: calc(110 * var(--cm));
  --x: calc(var(--wall-thickness) * -1);
  --y: calc(var(--wall-thickness) * -1);
}
.wall--left div:nth-of-type(1) {
  background: var(--wall-shade-four);
}
.wall--left div:nth-of-type(2) {
  background: var(--wall-shade-one);
}
.wall--left div:nth-of-type(3) {
  background: var(--wall-shade-one);
  overflow: hidden;
}
.wall--left div:nth-of-type(3):before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  filter: blur(var(--blur));
  background: radial-gradient(rgba(0,0,0,.........完整代码请登录后点击上方下载按钮下载查看