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.........完整代码请登录后点击上方下载按钮下载查看