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