div+css实现科幻电影中sifi大门点击打开交互效果代码
代码语言：html
所属分类：其他
代码描述：div+css实现科幻电影中sifi大门点击打开交互效果代码
代码标签： 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)) var(--gp),
radial-gradient(circle at 50% 0%, var(--hole1)) var(--gp),
radial-gradient(circle at 48% -2%, var(--hole2)) var(--gp),
radial-gradient(circle at 52% 2%, var(--hole3)) var(--gp),
linear-gradient(45deg, var(--c2) 33%, #ffffff20 55% 65%, var(--c3) 70% );
background-color: var(--c2);
}
.cuboid.room .side:nth-of-type(6) {
--u: 3.5px;
--c1: #83b0e3;
--c2: #4e6a89;
--c3: #273647;
--gp: 50%/calc(var(--u) * 5) calc(var(--u) * 10);
--bp: calc(var(--u) * -2.5) calc(var(--u) * -5);
--bg: radial-gradient(circle at 50% 25%, var(--c2) 15%, #fff0 30% 100%) var(--gp), conic-gradient(from 270deg at 34% 46%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 45deg at 66% 46%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 180deg at 50% 80%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 135deg at 50% 80%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 0deg at 0% 20%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from -45deg at 100% 20%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), linear-gradient(180deg, var(--c2) 0 4.5%, #fff0 0 45.25%, var(--c2) 0 50%, #fff0 0% 100%) var(--gp), radial-gradient(circle at 50% 25%, #fff0 0 25%, var(--c2) 26% 32%, #fff0 0 100%) var(--gp), linear-gradient(165deg, var(--c3) 15%, var(--c1) 44%, #fff0 0 100%) var(--gp), linear-gradient(180deg, var(--c1) 50%, #fff0 0 100%) var(--gp);
background: linear-gradient(180deg, #000d 75%, #fff0 100%), linear-gradient(90deg, var(--door-blue) 0 2.25vmin, #fff0 0 87.85vmin, var(--door-blue) 0 100%), var(--bg), var(--bg);
background-position: 0 0, 0 0, var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}
/*** CYLINDER ***/
.cylinder {
--bg-side: repeating-linear-gradient(5deg, #725f5880 0.01vmin, #8b888780 0.0125vmin, #bfbfbf80 0.015vmin);
--bg-side: repeating-linear-gradient(45deg, #725f5880 0.001vmin, #8b888780 0.002vmin, #bfbfbf80 0.015vmin), repeating-linear-gradient(-45deg, #725f5880 0.001vmin, #8b888780 0.002vmin, #bfbfbf80 0.015vmin);
--bg-side: repeating-linear-gradient(45deg, #725f5880 0 0.0001vmin, #8b888780 0 0.0002vmin), repeating-linear-gradient(-45deg, #725f58 0 0.0001vmin, #8b8887 0 0.0002vmin);
--bg-side: repeating-linear-gradient(45deg, #fff0 0.0001vmin, #fff0 0 0.0002vmin), repeating-linear-gradient(-45deg, #fff0 0 0.0001vmin, #fff0 0 0.0002vmin);
--height: 10;
--width: 10;
--depth: 90;
--hue: 200;
--sat: 25%;
height: calc(var(--height) * 1vmin);
width: calc(var(--width) * 1vmin);
position: absolute;
}
.cylinder > div {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
}
.cylinder > div:nth-of-type(1) {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
transform: translate3d( -50%, -50%, calc(var(--depth) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 40%);
}
.cylinder > div:nth-of-type(2) {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
transform: translate3d( -50%, -50%, calc(var(--depth) * -0.5vmin) ) rotateY(180deg);
background: var(--bg-side), hsl(var(--hue), var(--sat), 45%);
}
.cylinder > div:nth-of-type(3) {
width: calc(var(--depth) * 1vmin);
height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateY(90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 50%); /*45*/
}
.cylinder > div:nth-of-type(4) {
width: calc(var(--depth) * 1vmin);
height: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateY(-90deg) translate3d( 0, 0, calc(var(--width) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 55%); /*50*/
}
.cylinder > div:nth-of-type(5) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 60%);
}
.cylinder > div:nth-of-type(6) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 65%);
}
.cylinder > div:nth-of-type(7) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 70%);
}
.cylinder > div:nth-of-type(8) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-45deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 75%);
}
.cylinder > div:nth-of-type(9) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 80%);
}
.cylinder > div:nth-of-type(10) {
height: calc(var(--depth) * 1vmin);
width: calc(calc(calc(var(--width) * 41.17) / 100) * 1vmin);
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-135deg) translate3d( 0, 0, calc(var(--height) * 0.5vmin) );
background: var(--bg-side), hsl(var(--hue), var(--sat), 85%);
}
.cylinder:nth-child(1) {
transform: rotateY(90deg) translate3d(5vmin, 67vmin, 35vmin);
}
.cylinder:nth-child(2) {
transform: rotateY(90deg) translate3d(5vmin, -7vmin, 35vmin);
}
.cylinder:nth-child(n+3) {
--width: 6;
--height: 6;
}
.cylinder:nth-child(3) {
transform: rotateX(2deg) rotateZ(-90deg) rotateY(90deg) translate3d(1vmin, 83vmin, -27vmin);
}
.cylinder:nth-child(4) {
transform: rotateY(90deg) translate3d(1vmin, 68vmin, 38vmin);
}
.cylinder:nth-child(5) {
transform: rotateY(-90deg) translate3d(-1.1vmin, -4vmin, -37vmin) rotate(269deg);
}
.cylinder:nth-child(6) {
transform: rotateX(2deg) rotateZ(-90deg) rotateY(90deg) translate3d(1vmin, -9.1vmin, -27vmin) rotate(270deg);
}
.cylinder:nth-child(n+7) {
--depth: 70;
}
.cylinder:nth-child(7) {
transform: rotateZ(90deg) translate3d(68vmin, 9.1vmin, 25vmin) rotate(92deg);
}
.cylinder:nth-child(8) {
transform: rotateZ(90deg) rotateY(0deg) translate3d(68vmin, -83vmin, 25vmin);
}
.cylinder:nth-child(9) {
transform: rotateZ(90deg) rotateY(180deg) translate3d(4vmin, 9vmin, -35vmin) rotate(271deg);
}
.cylinder:nth-child(10) {
transform: rotateZ(-90deg) rotateY(180deg) translate3d(-4vmin, 83vmin, -35vmin);
}
.cylinder:nth-child(11) {
transform: rotateZ(90deg) rotateY(0deg) translate3d(32vmin, 10vmin, 35vmin);
}
.cylinder:nth-child(12) {
transform: rotateZ(90deg) rotateY(0deg) translate3d(32vmin, -84.2vmin, 35vmin) rotate(180deg);
}
.cylinder:nth-child(13) {
transform: rotateZ(90deg) rotateY(180deg) translate3d(4.95vmin, -54vmin, -35vmin) rotate(-90deg);
}
.cylinder:nth-child(14) {
transform: rotateZ(90deg) rotateY(180deg) translate3d(4.95vmin, -20vmin, -35vmin) rotate(-90deg);
}
.cylinder:nth-child(15) {
transform: rotateX(-2deg) rotateZ(-90deg) rotateY(90deg) translate3d(-1vmin, 83vmin, -27vmin);
}
.cylinder:nth-child(16) {
transform: rotateX(-2deg) rotateZ(-90deg) rotateY(90deg) translate3d(-0.5vmin, -9.1vmin, -27vmin) rotate(270deg);
}
/* rayas barras */
.cylinder:nth-child(3) > div:nth-of-type(5),
.cylinder:nth-child(15) > div:nth-of-type(5) {
background: #a6c1cd;
}
.cylinder:nth-child(3) > div:nth-of-type(10) {
background:
linear-gradient(-325deg, #fff0 1.75vmin, #80a2b3 calc(1.75vmin + 1px) 100%),
linear-gradient(-35deg, #fff0 1.75vmin, #80a2b3 calc(1.75vmin + 1px) 100%),
linear-gradient(145deg, #fff0 1.5vmin, #80a2b3 calc(1.5vmin + 1px) 100%),
linear-gradient(45deg, #fff0 0.8vmin, #80a2b3 0 100%),
linear-gradient(135deg, #fff0 0.8vmin, #80a2b3 0 100%),
hsl(var(--hue), var(--sat), 85%);
background-repeat: no-repeat;
background-size: 100% 2vmin, 100% 2vmin, 100% 2vmin, 1vmin 1vmin, 1vmin 1vmin, 100% 100%;
background-position: 50% 18%, 50% 18%, 50% 94%, 100% 57.7%, 100% 53.75%, 0 0;
}
.cylinder:nth-child(4) > div:nth-of-type(10) {
background:
linear-gradient(0deg, var(--door-blue) 0 1vmin, #fff0 0 86.75vmin, var(--door-blue) 86.75vmin 100%),
hsl(var(--hue), var(--sat), 85%);
}
.cylinder:nth-child(5) > div:nth-of-type(8) {
background:
linea.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0