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

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

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