css布局实现电影播放机打开关闭效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现电影播放机打开关闭效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  background: #0D0B40;
}

.entry {
  --scene-h: 3.75;
  --scene-w: 2.25;
  position: relative;
  left: -7.75%;
  top: -95%;
  background-color: rgba(255,255,255,75);
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 1;
}

.entry-holder {
  --scene-h: 5.5;
  --scene-w: 2.5;
  position: relative;
  left: -14%;
  top: -119.25%;
  background: #3B2A6F;
/*   border-radius: .1rem; */
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.top-block {
  --scene-h: 8;
  --scene-w: 18;
  position: relative;
  left: 18%;
  top: -200%;
  background: #3B2A6F;
/*   border-radius: .1rem; */
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll {
  --scene-h: 15;
  --scene-w: 15;
  position: relative;
  left: -6%;
  top: -287%;
  background: #3B2A6F;
  background: #D3D6E5;
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-two {
  --scene-h: 17;
  --scene-w: 17;
  position: relative;
  left: 50%;
  top: -376%;
  background: #3B2A6F;
  background: #D3D6E5;
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind {
  --scene-h: 3.5;
  --scene-w: 3.5;
  position: relative;
  left: 14.5%;
  top: -448%;
  background: linear-gradient(to top, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-two {
  --scene-h: 3.5;
  --scene-w: 3.5;
  position: relative;
  left: 14.5%;
  top: -420%;
  background: linear-gradient(to bottom, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-three {
  --scene-h: 3.5;
  --scene-w: 3.5;
  position: relative;
  left: -1.5%;
  top: -463%;
  background: linear-gradient(to left, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-four {
  --scene-h: 3.5;
  --scene-w: 3.5;
  position: relative;
  left: 30%;
  top: -481%;
  background: linear-gradient(to right, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-five {
  --scene-h: 4.25;
  --scene-w: 4.25;
  position: relative;
  left: 91%;
  top: -504%;
  background: linear-gradient(to right, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-six {
  --scene-h: 4.25;
  --scene-w: 4.25;
  position: relative;
  left: 73%;
  top: -500%;
  background: linear-gradient(to bottom, #3B2A6F 70%, #0D0B40 70%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-seven {
  --scene-h: 4.25;
  --scene-w: 4.25;
  position: relative;
  left: 54%;
  top: -550%;
  background: linear-gradient(to left, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.film-roll-behind-eight {
  --scene-h: 4.25;
  --scene-w: 4.25;
  position: relative;
  left: 72.5%;
  top: -600%;
  background: linear-gradient(to top, #3B2A6F 60%, #0D0B40 60%);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.shape-sq {
  --scene-h: 10;
  --scene-w: 10;
  position: relative;
  left: 220%;
  top: -880%;
  transform: rotate(20deg);
  background: #5E4BBE;
  background: #4A2CDE;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 9999;
}

.scene .lights-on {
  background: linear-gradient(to bottom, #3B2A6F 0% 6%, rgba(249, 250, 134, .8) 6% 100%);
}

.first {
  background: #4A2CDE;
  width: calc(var(--scene-w) / 1.5 * 1vmin);
  height: calc(var(--scene-h) / 1.5 * 1vmin);
}

.shape-ci {
  --scene-h: 11;
  --scene-w: 11;
  position: relative;
  left: -20%;
  top: -1100%;
  transform: rotate(35deg);
  border-radius: 50%;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 9999;
}

.shape-tri {
  --scene-h: 10;
  --scene-w: 10;
  position: relative;
  left: 250%;
  top: -920%;
  border-right: calc(var(--scene-h) / 2 * 1vmin) solid transparent;
  border-left: calc(var(--scene-h) / 1.5 * 1vmin) solid transparent;
  border-bottom: calc(var(--scene-h) * 1vmin) solid transparent;
  transform: rotate(140deg);
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 9999;
}

.hide-one {
  top: -930%;
  left: 303%;
  border-right: calc(var(--scene-h) * 1.1 * 1vmin) solid transparent;
  border-left: calc(var(--scene-h) / 1 * 1vmin) solid transparent;
  border-bottom: calc(var(--scene-h) * 2 * 1vmin) solid transparent;
  transform: rotate(90deg);
}

.hide-two {
  top: -1110%;
  left: 330%;
  width: calc(var(--scene-w) * 1.1 * 1vmin);
  height: calc(var(--scene-h) * 1.1 *1vmin);
}

.hide-three {
  background: #4A2CDE;
  top: -1230%;
  left: 277%;
}

.hide-four {
  top: -1330%;
  left: 330%;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  transform: rotate(-80deg);
  width: calc(var(--scene-w) * 1.8 * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  background: #4A2CDE;
}

.hide-five {
  top: -1250%;
  left: 170%;
  border-radius: 50%;
  background: #4A2CDE;
  transform: rotate(120deg);
}

.hide-six {
  top: -1250%;
  left: 215%;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #4A2CDE;
  transform: rotate(55deg);
  width: calc(var(--scene-w) / 1.2 * 1vmin);
  height: calc(var(--scene-h) * 1.1 * 1vmin);
}

.hide-seven {
  top: -1210%;
  left: 345%;
  background: #4A2CDE;
}
.hide-eight {
  top: -1310%;
  left: 265%;
  width: calc(var(--scene-w) / 1.8 * 1vmin);
  height: calc(var(--scene-h) / 1.8 * 1vmin);
  background: #4A2CDE;
}
.front-block {
  --scene-h: 6;
  --scene-w: 6;
  position: relative;
  left: 100%;
  top: -1435%;
  background: #3B2A6F;
  background-color: #D3D6E5;
  background: #D3D6E5;
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 9999;
}

.front-block-two {
  --scene-h: 150;
  --scene-w: 150;
  position: relative;
  left: 99.5%;
  top: -1845%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(-90deg);
  background: #3B2A6F;;
/*   background: linear-gradient(to bottom, #3B2A6F 0% 6%, rgba(249, 250, 134, .6) 6% 100%); */
    background: linear-gradient(to bottom, #3B2A6F 0% 6%, #0D0B40 6% 100%);
  width: calc(var(--scene-w) * 1vmin);
  height: calc(var(--scene-h) * 1vmin);
  z-index: 999;
}

.leg-two {
  --scene-h: 4.25;
  --scene-w: 4.25;
  position: relative;
  left: 5%;
  top: 20%;
  background: red;
  width: calc(var(--scene-w) * 1vm.........完整代码请登录后点击上方下载按钮下载查看