div+css实现科幻电影中sifi大门点击打开交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：div+css实现科幻电影中sifi大门点击打开交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  

  
  
<style>
/*** debug in progress ***/
/*** improving some details ***/

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

:root {
	--tra: all 2s ease 0s;
	--door-blue: #80a2b3;
	--door-white: #eef1f1; 
}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}
		
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	flex-wrap: wrap;
    cursor: pointer;
}

body:before {
    content: "";
	width: 180vmin;
    height: 180vmin;
    position: absolute;
    background: radial-gradient(circle at 52% 100%, #000 58vmin, #fff0 calc(65vmin + 1px) 100%), radial-gradient(circle at 50% 92%, #000 40vmin, #FF5722 50vmin, #fff0 calc(50vmin + 1px) 100%), repeating-conic-gradient(#FFF9 0%, transparent .00045%, transparent .0045%, transparent .112345%), radial-gradient(#0000, #0a123a), linear-gradient(180deg, #2000587d, #2000587d, #000, #9c27b02b), linear-gradient(0deg, #ff9800, #ff9800, #000, #009688ba);
    animation: spin 500s linear 0s infinite;
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

body:active {
    cursor: grabbing;
}

.content {
	width: 80vmin;
	height: 70vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}

.content:before, .content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: 100% 50%;
    transform: rotateY(90deg);
    right: -5vmin;
    /*
	--u: 0.225vmin;
    --r1: calc(var(--u) * 3);
    --r2: calc(var(--u) * 3.1);
    --r3: calc(var(--u) / 10);
    --r4: calc(var(--u) / 1.1);
    --r5: calc(var(--u) * 1.5);
    --r6: calc(var(--u) * 2.75);
    --c0: #173c4f;
    --c1: #4a4a4a;
    --c2: #838383;
    --c3: #cbcbcb;
    --c4: #ffffff;
    --gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
    background: 
        conic-gradient(from 225deg at 30% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
        conic-gradient(from 45deg at 70% 50%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
        conic-gradient(from -45deg at 50% 17%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
        conic-gradient(from 135deg at 50% 83%, var(--c0) 0 25%, #fff0 0 100%) var(--gp), 
        radial-gradient(circle at 100% 50%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 105% 55%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp), 
        radial-gradient(circle at 103% 52%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 0% 50%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 15% 65%, var(--c4) var(--r3), #fff0 var(--r4) 100%) var(--gp), 
        radial-gradient(circle at 5% 55%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp), 
        radial-gradient(circle at 3% 52%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 50% 100%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 53% 102%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 50% 0%, var(--c0) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        radial-gradient(circle at 65% 15%, var(--c4) var(--r3), #fff0 var(--r4) 100%) var(--gp), 
        radial-gradient(circle at 55% 5%, var(--c4) var(--r5), #fff0 var(--r6) 100%) var(--gp), 
        radial-gradient(circle at 53% 2%, var(--c1) var(--r1), #fff0 var(--r2) 100%) var(--gp), 
        linear-gradient(65deg, var(--c3) 40%, #ffffffdd 48% 52%, var(--c3) 60%);
    background-color: var(--c0);
    */
}

.content:after {
    transform-origin: 0% 50%;
    transform: rotateY(90deg) translateX(-80vmin);
    right: inherit;
    left: -4.95vmin;
}


.door {
	width: 100%;
	height: 100%;
}

.door:before {
    content: "";
    position: absolute;
    width: 86.2vmin;
    height: 66vmin;
    transform: translate3d(0, 0, 1px);
    left: -3.1vmin;
    top: 2vmin;
    box-shadow: 0 0 0.5vmin 0.25vmin #0e394f inset;
}

.cuboid {
	--height: 70;
	--width: 70;
	--depth: 10;
	--hue: 175;
	--sat: 10%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
}



.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
	background: hsl(var(--hue), var(--sat), 25%);
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)	translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
}
.cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 20%);
}













.door .cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
	clip-path: polygon(100% 0, 100% 33.33%, 75% 40%, 75% 60%, 100% 66.66%, 100% 100%, 0 100%, 0 0);
}
.door .cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(0deg);
	background: hsl(var(--hue), var(--sat), 25%);
	clip-path: polygon(100% 0, 100% 33.33%, 75% 40%, 75% 60%, 100% 66.66%, 100% 100%, 0 100%, 0 0);
}
.door .cuboid .side:nth-of-type(3) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-225%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    height: 20%;
}
.door .cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 40%);
}
.door .cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
}
.door .cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 20%);
}
.door .cuboid .side:nth-of-type(7) {
	width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -150%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.499vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    height: 33.33%;
}
.door .cuboid .side:nth-of-type(8) {
	width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, 50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.499vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    height: 33.33%;
}
.door .cuboid .side:nth-of-type(9) {
	--pos: 148%;
	height: calc(var(--depth) * 1vmin);
    transform: translate(var(--pos), 195%) rotateX(90deg) rotateY(-15deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    width: 25.5%;
}
.door .cuboid .side:nth-of-type(10) {
	--pos: 96%;
    height: calc(var(--depth) * 1vmin);
    transform: translate(var(--pos), 50%) rotateX(90deg) rotateY(15deg) translate3d(0, 0, calc(var(--height) * 0.01vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    width: 25.5%;
}








/* door drawings */
.door .cuboid.left .side:nth-of-type(1) {
	--lr: var(--door-white);
    background: linear-gradient(180deg, var(--door-white) 5vmin, var(--door-white) 12vmin), linear-gradient(-90deg, #fff0 51.75vmin, var(--lr) 20vmin 100%), linear-gradient(0deg, #fff0 66.5vmin, var(--lr) 20vmin 100%), linear-gradient(180deg, #fff0 66.5vmin, var(--lr) 20vmin 100%), conic-gradient(from 180deg at 97.75% 68.5%, var(--door-blue) 0 29.125%, #fff0 29.25% 100%), conic-gradient(from 255deg at 97.75% 31.5%, #fff0 0, var(--door-blue) 0.125% 29.125%, #fff0 0 100%), linear-gradient(90deg, #fff0 51vmin, var(--lr) 20vmin 100%), var(--door-blue);
    border-right: 1px solid #0008;
    background-size: 22vmin 28vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50% , 0 0;
}
.door .cuboid.right .side:nth-of-type(1) {
	--dr: #8fa3a2;
	--dr: var(--door-blue);
    background: 
		linear-gradient(90deg, #fff0 49.15vmin, var(--dr) 20vmin 100%), 
		linear-gradient(0deg, #fff0 66.5vmin, var(--dr) 20vmin 100%), 
		linear-gradient(180deg, #fff0 66.5vmin, var(--dr) 20vmin 100%), 
		linear-gradient(90deg, #fff0 19vmin, var(--door-white) 0 100%), 
		linear-gradient(195deg, #fff0 57vmin, var(--dr) calc(57vmin + 1px) 100%), 
		linear-gradient(-15deg, #fff0 57vmin, var(--dr) calc(57vmin + 1px) 100%), 
		linear-gradient(-90deg, #fff0 68.5vmin, var(--dr) 20vmin 100%), 
		var(--door-white);
		border-left: 1px solid #0008;
}



/*** room lights ***/
.cylinder:nth-child(11) > div:nth-of-type(5):before, 
.cylinder:nth-child(12) > div:nth-of-type(5):before, 
.cylinder:nth-child(13) > div:nth-of-type(5):before, 
.cylinder:nth-child(14) > div:nth-of-type(5):before {
    background: repeating-linear-gradient(0deg, #fff 0 8vmin, #fff0 0 10vmin);
    content: "";
    position: absolute;
    width: 50%;
    height: 96%;
    left: 25%;
    border-radius: 0.2vmin;
    box-shadow: 0 0 3.5vmin 0.05vmin #a5f5ff, 0 0 15vmin 1vmin #ffffff;
    box-sizing: border-box;
    filter: drop-shadow(0px 0px 6px #fff);
}

.cylinder:nth-child(11) > div:nth-of-type(5):before, 
.cylinder:nth-child(12) > div:nth-of-type(5):before {
    top:5%
}









.cuboid.left {
    left: -20vmin;
    transition: var(--tra);
	transform: translate3d(0vmin, 0vmin, -5vmin);
	animation: start-left 2s ease 0s 1;
}

.cuboid.right {
    left: 32.5vmin;
    transition: var(--tra);
	transform: translate3d(0vmin, 0vmin, -5vmin);
	animation: start-right 2s ease 0s 1;
}


@keyframes start-left {
	  0% { left: -53vmin; }
	100% { left: -20vmin; }
}

@keyframes start-right {
	  0% { left: 62vmin; }
	100% { left: 32.5vmin; }
}

.door:hover .cuboid.left {
    left: -53vmin;
}

.door:hover .cuboid.right {
    left: 62vmin;
}







.cuboid.right .side:nth-of-type(1) {
	clip-path: polygon(25% 33.33%, 25% 0, 100% 0, 100% 100%, 25% 100%, 25% 66.66%, 0 60%, 0 40%);
}
.cuboid.right .side:nth-of-type(2) {
	clip-path: polygon(25% 33.33%, 25% 0, 100% 0, 100% 100%, 25% 100%, 25% 66.66%, 0 60%, 0 40%);
}


.cuboid.right .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: #9ab8c7;
}
.cuboid.right .side:nth-of-type(4) {
    width: calc(var(--depth) * 1vmin);
    transform: translate(-225%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
    background: hsl(var(--hue), var(--sat), 75%);
    height: 100%;
}


.cuboid.right .side:nth-of-type(5) {
	width: 75%;
	transform: translate(-33%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}
.cuboid.right .side:nth-of-type(6) {
	width: 75%;
	transform: translate(-33%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
}


.cuboid.right .side:nth-of-type(7) {
    transform: translate(-50%, -150%) rotateY(90deg) translate3d(0px, 0, calc(var(--width) * -0.24925vmin));
	background: #9ab8c7;
}

.cuboid.right .side:nth-of-type(8) {
    transform: translate(-50%, 50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * -0.24925vmin));
	background: #9ab8c7;
}



.cuboid.right .side:nth-of-type(9) {
	--pos: -147%;
}
.cuboid.right .side:nth-of-type(10) {
	--pos: -198%;
}





















.cuboid.room .side:nth-child(1),
.cuboid.room .side:nth-child(2) {
    display: none;
}

.cuboid.room {
	--depth: 150;
    --width: 90;
    transform: translate3d(0vmin, 0vmin, 75vmin);
    pointer-events: none;	
}

.cuboid.room .side:nth-of-type(3),
.cuboid.room .side:nth-of-type(4) {
    --sz: 2px;
    --ln: 2.5px;
    --c1: #80a2b3;
    --c2: #607D8B;
    --c3: #ffffff;
    --ts: 50%/ calc(var(--sz) * 11.8) calc(var(--sz) * 20);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * -0.5vmin));
    background: 
        linear-gradient(-90deg, #0008 70%, #fff0 90%),  /*shine*/ 
        radial-gradient(circle at 60% 110%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), 
        radial-gradient(circle at 60% 10%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), 
        radial-gradient(circle at 110% 60%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), 
        radial-gradient(circle at 10% 60%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), 
        conic-gradient(from 120deg at 50% calc(82.75% + calc(var(--ln) / 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 120deg at 50% calc(82.75% + calc(var(--ln) / 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 120deg at 50% calc(82.5% - calc(var(--ln) * 1.5)), var(--c1) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 120deg at 50% calc(82.5% - calc(var(--ln) * 1.5)), var(--c1) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 60deg at calc(50% + var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 60deg at calc(50% + var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 180deg at calc(50% - var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 180deg at calc(50% - var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 0deg at calc(100% - var(--ln)) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from 0deg at calc(100% - var(--ln)) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from -90deg at var(--ln) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from -90deg at var(--ln) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from -60deg at 50% calc(50% - calc(var(--ln) * 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        conic-gradient(from -60deg at 50% calc(50% - calc(var(--ln) * 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), 
        var(--c1);

}

.cuboid.room .side:nth-of-type(4) {
    transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
}

.cuboid.room .side:nth-of-type(5) {
    --u: 2px;
    --r1: calc(var(--u) * 4);
    --r2: calc(var(--u) * 4.1);
    --r3: calc(var(--u) / 12);
    --r4: calc(var(--u) / 2.5);
    --r5: calc(var(--u) / 2.25);
    --r6: calc(var(--u) / 2);
    --c0: #050505;
    --c1: #1c1c1c;
    --c2: #404040;
    --c3: #525252;
    --c4: #808080;
    --gp: 50%/calc(var(--u) * 10) calc(var(--u) * 16.8);
    --border-fix: var(--c0) 0 25%, #fff0 0 100%;
    --screw1: var(--c4) var(--r3), #fff0 var(--r4);
    --screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6);
    --hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%;
    --hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%;
    --hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%;
    background: 
    linear-gradient(0deg, #000d 75%, #fff0 100%),  
    conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), 
    conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), 
    conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), 
    conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp), 
    radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp), 
    radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp), 
    radial-gradient(circle at 99.5% 16.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 100% 17%, var(--screw2)) var(--gp), 
    radial-gradient(circle at -0.5% 16.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 0% 17%, var(--screw2)) var(--gp), 
    radial-gradient(circle at 49.5% 67.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 50% 68%, var(--screw2)) var(--gp), 
    radial-gradient(circle at 49.5% 31.5%, var(--screw1)) var(--gp), 
    radial-gradient(circle at 50% 32%, var(--screw2)) var(--gp), 
    radial-gradient(circle at 100% 50%, var(--hole1)) var(--gp), 
    radial-gradient(circle at 98% 48%, var(--hole2)) var(--gp), 
    radial-gradient(circle at 102% 52%, var(--hole3)) var(--gp), 
    radial-gradient(circle at 0% 50%, var(--hole1)) var(--gp), 
    radial-gradient(circle at -2% 48%, var(--hole2)) var(--gp), 
    radial-gradient(circle at 2% 52%, var(--hole3)) var(--gp), 
    radial-gradient(circle at 50% 100%, var(--hole1)) var(--gp), 
    radial-gradient(circle at 48% 98%, var(--hole2)) var(--gp), 
    radial-gradient(circle at 52% 102%, var(--hole3).........完整代码请登录后点击上方下载按钮下载查看