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