css实现一个三维客厅电影播放室动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现一个三维客厅电影播放室动画效果代码，点击电视机开始播放电影。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">  
  
  
  
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  font-family: "Press Start 2P", cursive;
}

/***********************/
/***********************/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  background-color: #061819;
  background-image: radial-gradient(circle, #061819, #000405);
}

small {
  font-size: 3.4vmin;
  color: white;
  background-color: rgba(6, 24, 25, 0.85);
  width: 100%;
  height: 100%;
  text-shadow: 0 0 1.275vmin rgba(255, 255, 255, 0.75);
}

.face {
  position: absolute;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/***********************/
/***********************/
.main {
  position: absolute;
  width: 61.2vmin;
  height: 61.2vmin;
  transform: perspective(680vmin) rotateX(66deg) rotateZ(35deg) translateZ(-23.8vmin);
}

.shadows {
  width: 100%;
  height: 100%;
}

.shadow {
  position: absolute;
  box-shadow: 0 0 3.4vmin rgba(3, 12, 12, 0.75);
  filter: blur(0.595vmin);
}
.shadow1 {
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  background-color: black;
}
.shadow2 {
  top: -2%;
  right: 98%;
  width: 75%;
  height: 101%;
  transform-origin: top right;
  transform: skewY(-33deg);
  background-color: #010404;
  box-shadow: 0 0 8.5vmin rgba(3, 12, 12, 0.95);
  filter: blur(0.85vmin);
}
.shadow3 {
  top: 100%;
  left: 0;
  width: 100%;
  height: 5.1vmin;
  transform-origin: top right;
  transform: skewX(45deg);
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.05), rgba(240, 247, 245, 0.025));
}
.shadow4 {
  top: 0;
  left: 100%;
  width: 4.675vmin;
  height: 100%;
  transform-origin: top left;
  transform: skewY(45deg);
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.035), rgba(240, 247, 245, 0.025));
}

.light {
  position: absolute;
}
.light1 {
  top: 37.4vmin;
  left: 100%;
  width: 10.2vmin;
  height: 18.7vmin;
  transform-origin: top right;
  transform: skewY(47deg);
  background-image: linear-gradient(to right, rgba(251, 250, 254, 0.1), transparent);
  filter: blur(0.85vmin);
  animation: toggle 1000ms linear infinite;
}
.light3 {
  top: 60%;
  left: 60%;
  width: 34vmin;
  height: 34vmin;
  transform-origin: top left;
  transform: skewY(40deg);
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(190, 242, 249, 0.1), transparent);
  filter: blur(3.4vmin);
}

.ty {
  position: absolute;
  display: flex;
  top: 100%;
  left: 0;
  font-size: 7.905vmin;
  line-height: 2;
  letter-spacing: 0.85vmin;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(190, 242, 249, 0.5);
  animation: neon2 1000ms infinite alternate;
}

.floor {
  width: 61.2vmin;
  height: 61.2vmin;
  position: absolute;
  top: 0;
}
.floor__front {
  width: 61.2vmin;
  height: 2.125vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(59.075vmin);
}
.floor__back {
  width: 61.2vmin;
  height: 2.125vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-61.2vmin) translateY(-2.125vmin);
}
.floor__right {
  width: 61.2vmin;
  height: 2.125vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(61.2vmin) translateX(-61.2vmin) translateY(-2.125vmin);
}
.floor__left {
  width: 61.2vmin;
  height: 2.125vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.125vmin);
}
.floor__top {
  width: 61.2vmin;
  height: 61.2vmin;
  transform-origin: top left;
  transform: translateZ(2.125vmin);
}
.floor__bottom {
  width: 61.2vmin;
  height: 61.2vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-61.2vmin);
}
.floor__front {
  background-color: #9e99c1;
  background-image: linear-gradient(rgba(190, 242, 249, 0.5), rgba(190, 242, 249, 0.5));
  border-bottom: 0.425vmin solid #8fe9f5;
  border-left: 0.425vmin solid #8fe9f5;
}
.floor__back {
  background-color: black;
  border-bottom: 0.425vmin solid #8fe9f5;
}
.floor__left {
  background-color: #131613;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0 100%);
  border-bottom: 0.425vmin solid #8fe9f5;
}
.floor__right {
  background-color: #383358;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.2), rgba(97, 223, 240, 0.2)), linear-gradient(to right, rgba(224, 243, 246, 0.7), rgba(145, 212, 223, 0.95));
  border-bottom: 0.425vmin solid #8fe9f5;
  border-right: 0.425vmin solid #8fe9f5;
}
.floor__top {
  background-color: #cbe1e4;
  overflow: hidden;
}
.floor__top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.175) 0.255vmin, transparent 0.255vmin), linear-gradient(to right, rgba(255, 255, 255, 0.175) 0.255vmin, transparent 0.255vmin);
  background-size: 5.1vmin 5.1vmin;
  z-index: 5;
}
.floor__top .shadows {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(97, 223, 240, 0.75), transparent 6.5%), linear-gradient(to right, rgba(97, 223, 240, 0.75), transparent 6.5%), radial-gradient(circle, transparent, rgba(167, 237, 247, 0.1)), linear-gradient(to right, rgba(120, 228, 243, 0.3), transparent 30%), linear-gradient(to bottom, rgba(120, 228, 243, 0.3), transparent 30%), linear-gradient(to right, rgba(39, 59, 64, 0.65), transparent 30%), linear-gradient(to right, rgba(0, 1, 1, 0.25), rgba(20, 30, 32, 0.35), transparent 20%), linear-gradient(to bottom, rgba(39, 59, 64, 0.85), transparent 30%), linear-gradient(to bottom, rgba(0, 1, 1, 0.25), rgba(20, 30, 32, 0.35), transparent 15%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.floor__top .light-1 {
  position: absolute;
  top: 8.5vmin;
  left: 17vmin;
  width: 27.2vmin;
  height: 25.5vmin;
  transform-origin: top left;
  transform: skewX(42deg);
  background-image: linear-gradient(to bottom, rgba(251, 250, 254, 0.5), rgba(251, 250, 254, 0.3), transparent);
  filter: blur(0.85vmin);
  animation: toggle 1000ms linear infinite;
}
.floor__top .light-2,
.floor__top .light-3,
.floor__top .light-4 {
  position: absolute;
  left: 1.7vmin;
  width: 11.9vmin;
  height: 8.5vmin;
  transform-origin: top left;
  transform: skewY(42deg);
  background-image: linear-gradient(to right, rgba(168, 107, 182, 0.3), rgba(251, 250, 254, 0.3), transparent);
  filter: blur(0.85vmin);
}
.floor__top .light-2 {
  bottom: 3.4vmin;
}
.floor__top .light-3 {
  bottom: 14.45vmin;
}
.floor__top .light-4 {
  bottom: 24.65vmin;
}
.floor__top .shadow-1 {
  position: absolute;
  top: 44.2vmin;
  left: 12.325vmin;
  width: 33.575vmin;
  height: 17vmin;
  transform-origin: top left;
  transform: skewX(42deg);
  background-image: linear-gradient(to bottom, rgba(3, 25, 28, 0.75), transparent);
  filter: blur(0.85vmin);
}
.floor__top .shadow-2 {
  position: absolute;
  top: 34vmin;
  left: 36.55vmin;
  width: 14.025vmin;
  height: 34vmin;
  transform-origin: top left;
  transform: skewX(42deg);
  background-image: linear-gradient(to bottom, rgba(3, 25, 28, 0.7), transparent);
  filter: blur(0.85vmin);
}
.floor__top .neon-line {
  left: 34vmin;
  bottom: -3.4vmin;
  opacity: 0.7;
  filter: blur(1.445vmin);
}
.floor__top .neon-line .neon {
  background-color: #bef2f9;
  box-shadow: 0 0 6.8vmin 0.2125vmin rgba(192, 242, 249, 0.5);
}
.floor__bottom {
  background-color: #030c0c;
}

.wall-a {
  width: 1.7vmin;
  height: 61.2vmin;
  position: absolute;
  top: 0;
  transform: translateZ(2.04vmin);
}
.wall-a__front {
  width: 1.7vmin;
  height: 44.2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(17vmin);
}
.wall-a__back {
  width: 1.7vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1.7vmin) translateY(-44.2vmin);
}
.wall-a__right {
  width: 61.2vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.7vmin) translateX(-61.2vmin) translateY(-44.2vmin);
}
.wall-a__left {
  width: 61.2vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-44.2vmin);
}
.wall-a__top {
  width: 1.7vmin;
  height: 61.2vmin;
  transform-origin: top left;
  transform: translateZ(44.2vmin);
}
.wall-a__bottom {
  width: 1.7vmin;
  height: 61.2vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1.7vmin);
}
.wall-a__front {
  background-color: #9e99c1;
  background-image: linear-gradient(to bottom, transparent, rgba(190, 242, 249, 0.85));
  border-left: 0.425vmin solid #8fe9f5;
}
.wall-a__back {
  background-color: #090b09;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 30%);
}
.wall-a__left {
  background-color: #131613;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 30%);
}
.wall-a__right {
  background-color: #101310;
  border-bottom: 0.425vmin solid #8fe9f5;
  background-image: linear-gradient(to bottom, rgba(185, 241, 249, 0.05), transparent 15%), linear-gradient(to left, rgba(167, 237, 247, 0.075), transparent 7%), linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 20%), linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(9, 11, 9, 0.5) 20%), linear-gradient(to left, rgba(0, 0, 0, 0.85), transparent 20%), linear-gradient(to top, rgba(167, 237, 247, 0.5), transparent 50%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.wall-a__right .light-1,
.wall-a__right .light-2,
.wall-a__right .light-3 {
  position: absolute;
  bottom: 8.5vmin;
  width: 6.8vmin;
  height: 10.2vmin;
  background-image: radial-gradient(circle at 50% 0%, rgba(168, 107, 182, 0.75), rgba(168, 107, 182, 0.35) 30%, transparent);
  border-bottom-left-radius: 6.8vmin;
  border-bottom-right-radius: 6.8vmin;
  filter: blur(0.85vmin);
}
.wall-a__right .light-1 {
  left: 5.1vmin;
}
.wall-a__right .light-2 {
  left: 15.3vmin;
}
.wall-a__right .light-3 {
  left: 25.5vmin;
}
.wall-a__right .light-4 {
  position: absolute;
  bottom: 3.4vmin;
  left: 6.8vmin;
  width: 45.9vmin;
  height: 0.425vmin;
  transform: skewX(-20deg);
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.15), rgba(190, 242, 249, 0.35), rgba(190, 242, 249, 0.15));
  filter: blur(0.85vmin);
}
.wall-a__right .light-5,
.wall-a__right .light-6,
.wall-a__right .light-7 {
  position: absolute;
  bottom: 17vmin;
  width: 6.8vmin;
  height: 9.35vmin;
  background-image: radial-gradient(circle at 50% 0%, rgba(190, 242, 249, 0.1), rgba(190, 242, 249, 0.2) 30%, transparent);
  border-top-left-radius: 8.5vmin;
  border-top-right-radius: 8.5vmin;
  filter: blur(0.85vmin);
}
.wall-a__right .light-5 {
  left: 5.1vmin;
}
.wall-a__right .light-6 {
  left: 15.3vmin;
}
.wall-a__right .light-7 {
  left: 25.5vmin;
}
.wall-a__top {
  background-color: #fbfafe;
  background-image: linear-gradient(to bottom, rgba(184, 228, 235, 0.95), rgba(204, 235, 240, 0.85), rgba(224, 243, 246, 0.6));
  border-left: 0.425vmin solid #8fe9f5;
  border-top: 0.425vmin solid #8fe9f5;
}

.wall-b {
  width: 59.67vmin;
  height: 1.7vmin;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateZ(2.04vmin);
}
.wall-b__front {
  width: 59.67vmin;
  height: 44.2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-42.5vmin);
}
.wall-b__back {
  width: 59.67vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-59.67vmin) translateY(-44.2vmin);
}
.wall-b__right {
  width: 1.7vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(59.67vmin) translateX(-1.7vmin) translateY(-44.2vmin);
}
.wall-b__left {
  width: 1.7vmin;
  height: 44.2vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-44.2vmin);
}
.wall-b__top {
  width: 59.67vmin;
  height: 1.7vmin;
  transform-origin: top left;
  transform: translateZ(44.2vmin);
}
.wall-b__bottom {
  width: 59.67vmin;
  height: 1.7vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-59.67vmin);
}
.wall-b__front {
  background-color: #1c211c;
  border-bottom: 0.425vmin solid #8fe9f5;
  background-image: linear-gradient(to bottom, rgba(185, 241, 249, 0.075), transparent 15%), linear-gradient(to bottom, rgba(143, 233, 245, 0.75), rgba(5, 5, 5, 0.25), transparent), linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 20%), linear-gradient(to top, rgba(143, 233, 245, 0.25), rgba(9, 11, 9, 0.5) 20%), linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent 20%), linear-gradient(to top, rgba(167, 237, 247, 0.35), transparent 50%);
  background-size: 100% 100%, 23.8vmin 11.9vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 17.85vmin 85%, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.wall-b__front .light-1 {
  position: absolute;
  bottom: 3.4vmin;
  left: 6.8vmin;
  width: 45.9vmin;
  height: 0.425vmin;
  transform: skewX(-20deg);
  background-image: linear-gradient(to left, rgba(190, 242, 249, 0.1), rgba(190, 242, 249, 0.2), rgba(190, 242, 249, 0.1));
  filter: blur(0.85vmin);
}
.wall-b__front .light-2,
.wall-b__front .light-3 {
  position: absolute;
  bottom: 23.8vmin;
  width: 5.95vmin;
  height: 8.5vmin;
  background-image: radial-gradient(circle at 50% 0%, rgba(190, 242, 249, 0.1), rgba(190, 242, 249, 0.1) 30%, transparent);
  border-bottom-left-radius: 8.5vmin;
  border-bottom-right-radius: 8.5vmin;
  filter: blur(1.105vmin);
}
.wall-b__front .light-2 {
  left: 4.675vmin;
}
.wall-b__front .light-3 {
  left: 49.3vmin;
}
.wall-b__back {
  background-color: #090b09;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 30%);
}
.wall-b__right {
  background-color: #383358;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.2), rgba(97, 223, 240, 0.2)), linear-gradient(to top, rgba(145, 212, 223, 0.95), rgba(204, 235, 240, 0.85), rgba(255, 255, 255, 0.6));
  border-right: 0.425vmin solid #8fe9f5;
}
.wall-b__top {
  background-color: #fbfafe;
  background-image: linear-gradient(to right, rgba(184, 228, 235, 0.95), rgba(204, 235, 240, 0.85), rgba(224, 243, 246, 0.6));
  border-top: 0.425vmin solid #8fe9f5;
}

.speaker-a,
.speaker-b {
  width: 5.1vmin;
  height: 2.55vmin;
  position: absolute;
  top: 1.53vmin;
  transform: translateZ(34vmin) rotateX(-7deg);
}
.speaker-a__front,
.speaker-b__front {
  width: 5.1vmin;
  height: 6.8vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-4.25vmin);
}
.speaker-a__back,
.speaker-b__back {
  width: 5.1vmin;
  height: 6.8vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-5.1vmin) translateY(-6.8vmin);
}
.speaker-a__right,
.speaker-b__right {
  width: 2.55vmin;
  height: 6.8vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(5.1vmin) translateX(-2.55vmin) translateY(-6.8vmin);
}
.speaker-a__left,
.speaker-b__left {
  width: 2.55vmin;
  height: 6.8vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-6.8vmin);
}
.speaker-a__top,
.speaker-b__top {
  width: 5.1vmin;
  height: 2.55vmin;
  transform-origin: top left;
  transform: translateZ(6.8vmin);
}
.speaker-a__bottom,
.speaker-b__bottom {
  width: 5.1vmin;
  height: 2.55vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-5.1vmin);
}
.speaker-a__front,
.speaker-b__front {
  background-color: #090b09;
  border: 0.255vmin solid #8fe9f5;
}
.speaker-a__back,
.speaker-b__back {
  background-color: #a1bec5;
  background-image: linear-gradient(to bottom, rgba(143, 233, 245, 0.92), rgba(190, 242, 249, 0.65));
}
.speaker-a__back::after,
.speaker-b__back::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(168, 107, 182, 0.95);
  filter: blur(0.595vmin);
  transform: translateZ(0.2125vmin) rotateX(-7deg);
}
.speaker-a__left,
.speaker-b__left {
  background-color: #f0f7f5;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.75), rgba(190, 242, 249, 0.25));
  border-left: 0.425vmin solid #8fe9f5;
}
.speaker-a__right,
.speaker-b__right {
  background-color: #f0f7f5;
  background-image: linear-gradient(to left, rgba(190, 242, 249, 0.75), rgba(190, 242, 249, 0.25));
  border-right: 0.425vmin solid #8fe9f5;
}
.speaker-a__top,
.speaker-b__top {
  background-color: #cbe1e4;
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.92), rgba(190, 242, 249, 0.5));
  border-top: 0.425vmin solid #8fe9f5;
}
.speaker-a__bottom,
.speaker-b__bottom {
  background-color: #a1bec5;
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.92), rgba(190, 242, 249, 0.5));
  border-top: 0.425vmin solid #8fe9f5;
}

.speaker-a {
  left: 6.8vmin;
}

.speaker-b {
  right: 5.1vmin;
}

.pic-a,
.pic-b,
.pic-c {
  width: 0.595vmin;
  height: 6.8vmin;
  position: absolute;
  left: 1.7vmin;
  transform: translateZ(16.15vmin);
}
.pic-a__front,
.pic-b__front,
.pic-c__front {
  width: 0.595vmin;
  height: 9.35vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-2.55vmin);
}
.pic-a__back,
.pic-b__back,
.pic-c__back {
  width: 0.595vmin;
  height: 9.35vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.595vmin) translateY(-9.35vmin);
}
.pic-a__right,
.pic-b__right,
.pic-c__right {
  width: 6.8vmin;
  height: 9.35vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.595vmin) translateX(-6.8vmin) translateY(-9.35vmin);
}
.pic-a__left,
.pic-b__left,
.pic-c__left {
  width: 6.8vmin;
  height: 9.35vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-9.35vmin);
}
.pic-a__top,
.pic-b__top,
.pic-c__top {
  width: 0.595vmin;
  height: 6.8vmin;
  transform-origin: top left;
  transform: translateZ(9.35vmin);
}
.pic-a__bottom,
.pic-b__bottom,
.pic-c__bottom {
  width: 0.595vmin;
  height: 6.8vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.595vmin);
}
.pic-a__front,
.pic-b__front,
.pic-c__front {
  background-color: #f0f7f5;
  background-image: linear-gradient(to bottom, rgba(143, 233, 245, 0.85), rgba(129, 70, 142, 0.9));
}
.pic-a__back,
.pic-b__back,
.pic-c__back {
  background-color: #f0f7f5;
  background-image: linear-gradient(to bottom, rgba(143, 233, 245, 0.85), rgba(129, 70, 142, 0.9));
}
.pic-a__right,
.pic-b__right,
.pic-c__right {
  background-color: #f0f7f5;
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.75), rgba(168, 107, 182, 0.85));
  padding: 0.34vmin;
}
.pic-a__right::after,
.pic-b__right::after,
.pic-c__right::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(162, 236, 246, 0.1), rgba(156, 87, 172, 0.1));
}
.pic-a__right img,
.pic-b__right img,
.pic-c__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic-a__top,
.pic-b__top,
.pic-c__top {
  background-color: #cbe1e4;
  background-image: linear-gradient(to right, rgba(120, 228, 243, 0.85), rgba(120, 228, 243, 0.85));
}
.pic-a__bottom,
.pic-b__bottom,
.pic-c__bottom {
  background-color: #cbe1e4;
}

.pic-a {
  bottom: 5.1vmin;
  cursor: pointer;
}

.pic-b {
  bottom: 15.3vmin;
}

.pic-c {
  bottom: 25.5vmin;
}

.sofa {
  position: absolute;
  bottom: 3.4vmin;
  left: 25.075vmin;
  width: 12.75vmin;
  height: 37.4vmin;
  transform: translateZ(2.125vmin) rotateZ(-90deg);
}

.sofa-a,
.sofa-b {
  width: 11.9vmin;
  height: 3.4vmin;
  position: absolute;
}
.sofa-a__front,
.sofa-b__front {
  width: 11.9vmin;
  height: 8.5vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-5.1vmin);
}
.sofa-a__back,
.sofa-b__back {
  width: 11.9vmin;
  height: 8.5vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-11.9vmin) translateY(-8.5vmin);
}
.sofa-a__right,
.sofa-b__right {
  width: 3.4vmin;
  height: 8.5vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(11.9vmin) translateX(-3.4vmin) translateY(-8.5vmin);
}
.sofa-a__left,
.sofa-b__left {
  width: 3.4vmin;
  height: 8.5vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-8.5vmin);
}
.sofa-a__top,
.sofa-b__top {
  width: 11.9vmin;
  height: 3.4vmin;
  transform-origin: top left;
  transform: translateZ(8.5vmin);
}
.sofa-a__bottom,
.sofa-b__bottom {
  width: 11.9vmin;
  height: 3.4vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-11.9vmin);
}
.sofa-a__front,
.sofa-b__front {
  background-color: #0b0f11;
  background-image: linear-gradient(to left, rgba(190, 242, 249, 0.1), rgba(190, 242, 249, 0.025) 60%);
}
.sofa-a__back,
.sofa-b__back {
  background-color: #161c20;
}
.sofa-a__left,
.sofa-b__left {
  background-color: #0b0f11;
  background-image: linear-gradient(to bottom, transparent, rgba(190, 242, 249, 0.1));
  border-bottom: 0.425vmin solid #8fe9f5;
}
.sofa-a__right,
.sofa-b__right {
  background-color: #222c32;
  background-image: linear-gradient(to bottom, rgba(190, 242, 249, 0.15), rgba(190, 242, 249, 0.05) 60%);
}
.sofa-a__top,
.sofa-b__top {
  background-color: #11171a;
  background-image: linear-gradient(to left, rgba(190, 242, 249, 0.35), rgba(190, 242, 249, 0.15), rgba(190, 242, 249, 0.025) 60%);
  border-right: 0.187vmin solid #61dff0;
}
.sofa-a__bottom,
.sofa-b__bottom {
  background-color: #1c2429;
}

.sofa-a {
  bottom: 0;
}

.sofa-b {
  top: 0;
}

.sofa-c {
  width: 12.75vmin;
  height: 30.6vmin;
  position: absolute;
  bottom: 3.4vmin;
}
.sofa-c__front {
  width: 12.75vmin;
  height: 4.25vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(26.35vmin);
}
.sofa-c__back {
  width: 12.75vmin;
  height: 4.25vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-12.75vmin) translateY(-4.25vmin);
}
.sofa-c__right {
  width: 30.6vmin;
  height: 4.25vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(12.75vmin) translateX(-30.6vmin) translateY(-4.25vmin);
}
.sofa-c__left {
  width: 30.6vmin;
  height: 4.25vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-4.25vmin);
}
.sofa-c__top {
  width: 12.75vmin;
  height: 30.6vmin;
  transform-origin: top left;
  transform: translateZ(4.25vmin);
}
.sofa-c__bottom {
  width: 12.75vmin;
  height: 30.6vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-12.75vmin);
}
.sofa-c__front {
  background-color: #161c20;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.1), transparent);
}
.sofa-c__back {
  background-color: #161c20;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.1), transparent);
}
.sofa-c__left {
  background-color: #0b0f11;
  background-image: linear-gradient(to bottom, transparent, rgba(190, 242, 249, 0.1));
  border-bottom: 0.425vmin solid #8fe9f5;
}
.sofa-c__right {
  background-color: #222c32;
}
.sofa-c__top {
  background-color: #1c2429;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.3), transparent);
}
.sofa-c__bottom {
  background-color: #1c2429;
}

.sofa-d,
.sofa-e {
  width: 11.9vmin;
  height: 15.13vmin;
  position: absolute;
  right: -0.17vmin;
  transform: translateZ(4.25vmin);
}
.sofa-d__front,
.sofa-e__front {
  width: 11.9vmin;
  height: 1.7vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(13.43vmin);
}
.sofa-d__back,
.sofa-e__back {
  width: 11.9vmin;
  height: 1.7vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-11.9vmin) translateY(-1.7vmin);
}
.sofa-d__right,
.sofa-e__right {
  width: 15.13vmin;
  height: 1.7vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(11.9vmin) translateX(-15.13vmin) translateY(-1.7vmin);
}
.sofa-d__left,
.sofa-e__left {
  width: 15.13vmin;
  height: 1.7vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.7vmin);
}
.sofa-d__top,
.sofa-e__top {
  width: 11.9vmin;
  height: 15.13vmin;
  transform-origin: top left;
  transform: translateZ(1.7vmin);
}
.sofa-d__bottom,
.sofa-e__bottom {
  width: 11.9vmin;
  height: 15.13vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-11.9vmin);
}
.sofa-d__front,
.sofa-e__front {
  background-color: #161c20;
  background-image: linear-gradient(to right, rgba(190, 242, 249, 0.2), transparent);
}
.sofa-d__back,
.sofa-e__back {
  background-color: #161c20;
}
.sofa-d__left,
.sofa-e__left {
  background-color: #161c20;
  background-image: linear-gradient(to bottom, transparent, rgba(190, 242, 249, 0.2));
}
.sofa-d__right,
.sofa-e__right {
  background-color: #222c32;
}
.sofa-d__top,
.sofa-e__top {
  background-color: #1c2429;
  background-image: linear-gradient(to left, rgba(190, 242, 249, 0.45), rgba(19.........完整代码请登录后点击上方下载按钮下载查看