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