css布局实现可旋转三维未来房间效果代码
代码语言：html
所属分类：三维
代码描述：css布局实现可旋转三维未来房间效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/***********************/
/***********************/
/***********************/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
user-select: none;
-webkit-tap-highlight-color: transparent;
appearance: none;
font-family: "Share Tech", sans-serif;
color: black;
}
/***********************/
/***********************/
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
font-weight: bolder;
overflow: hidden;
cursor: grab;
background-color: #090a0a;
}
.face {
position: absolute;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/***********************/
/***********************/
.main {
position: absolute;
width: 63vmin;
height: 63vmin;
transform: perspective(700vmin) rotateX(66deg) rotateZ(40deg) translateZ(-24.5vmin);
}
.is-main-active {
animation: is-main-active 600ms linear 1000ms infinite;
}
@keyframes is-main-active {
0%, 20% {
transform: perspective(700vmin) rotateX(65deg) rotateZ(40deg) translateZ(-24.5vmin);
}
80%, 100% {
transform: perspective(700vmin) rotateX(66deg) rotateZ(40deg) translateZ(-24.5vmin);
}
}
.shadows {
position: absolute;
width: 100%;
height: 100%;
background-color: #070707;
box-shadow: 0 0 1.75vmin 0.875vmin #070707;
}
.shadow {
position: absolute;
background-color: #070707;
filter: blur(1.05vmin);
}
.shadow-01 {
left: 100%;
width: 11.8125vmin;
height: 100%;
transform-origin: bottom left;
transform: skewY(-60deg);
}
.shadow-02 {
bottom: 100%;
width: 100%;
height: 21vmin;
transform-origin: bottom left;
transform: skewX(-30deg);
}
.light {
position: absolute;
width: 8.75vmin;
height: 17.5vmin;
top: 64.75vmin;
background-image: linear-gradient(to bottom, rgba(112, 38, 29, 0.45), rgba(62, 40, 35, 0.1) 70%, rgba(62, 40, 35, 0.05));
filter: blur(1.75vmin);
}
.light-01 {
left: 8.75vmin;
}
.light-02 {
left: 26.25vmin;
width: 10.5vmin;
}
.light-03 {
left: 45.5vmin;
}
.light-04 {
top: 31.5vmin;
left: 63vmin;
width: 14vmin;
height: 28vmin;
transform-origin: bottom left;
transform: rotateZ(-45deg);
border-radius: 50%;
background-image: linear-gradient(to bottom, rgba(24, 150, 222, 0.45), rgba(16, 77, 144, 0.1) 70%, rgba(16, 77, 144, 0.05));
box-shadow: 0 0 3.5vmin 3.5vmin rgba(16, 77, 144, 0.02);
}
.light-05 {
top: -19.25vmin;
left: 8.75vmin;
background-image: linear-gradient(to top, rgba(112, 38, 29, 0.45), rgba(62, 40, 35, 0.1) 70%, rgba(62, 40, 35, 0.05));
}
.light-06 {
top: -19.25vmin;
left: 26.25vmin;
width: 10.5vmin;
background-image: linear-gradient(to top, rgba(112, 38, 29, 0.45), rgba(62, 40, 35, 0.1) 70%, rgba(62, 40, 35, 0.05));
}
.light-07 {
top: -19.25vmin;
left: 45.5vmin;
background-image: linear-gradient(to top, rgba(112, 38, 29, 0.45), rgba(62, 40, 35, 0.1) 70%, rgba(62, 40, 35, 0.05));
}
.reflex {
position: absolute;
filter: blur(0.875vmin);
}
.reflex-01 {
top: 100%;
width: 100%;
height: 3.5vmin;
transform-origin: top left;
transform: skewX(45deg);
background-image: linear-gradient(to bottom, rgba(2, 2, 2, 0.85), rgba(7, 7, 7, 0.4));
}
.reflex-02 {
top: 100%;
width: 68.25vmin;
height: 15.75vmin;
transform-origin: top left;
transform: skewX(42deg);
background-image: linear-gradient(to bottom, rgba(16, 77, 144, 0.075), transparent);
border-left: 3.5vmin solid rgba(2, 2, 2, 0.1);
border-right: 3.5vmin solid rgba(2, 2, 2, 0.1);
}
.reflex-03 {
bottom: 0;
left: 100%;
width: 14vmin;
height: 100%;
transform-origin: bottom left;
transform: skewY(45deg);
background-image: linear-gradient(to right, rgba(16, 77, 144, 0.075), transparent);
border-top: 3.5vmin solid rgba(2, 2, 2, 0.1);
border-bottom: 3.5vmin solid rgba(2, 2, 2, 0.1);
}
.reflex-04 {
top: 100%;
left: 0;
width: 100%;
height: 35vmin;
transform-origin: top left;
transform: skewX(-25deg);
background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.2), transparent);
}
/***********************/
/***********************/
.floor-bottom,
.floor-top {
width: 63vmin;
height: 63vmin;
position: absolute;
top: 0;
left: 0;
}
.floor-bottom__front,
.floor-top__front {
width: 63vmin;
height: 0.875vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(62.125vmin);
}
.floor-bottom__back,
.floor-top__back {
width: 63vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-63vmin) translateY(-0.875vmin);
}
.floor-bottom__right,
.floor-top__right {
width: 63vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(63vmin) translateX(-63vmin) translateY(-0.875vmin);
}
.floor-bottom__left,
.floor-top__left {
width: 63vmin;
height: 0.875vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.875vmin);
}
.floor-bottom__top,
.floor-top__top {
width: 63vmin;
height: 63vmin;
transform-origin: top left;
transform: translateZ(0.875vmin);
}
.floor-bottom__bottom,
.floor-top__bottom {
width: 63vmin;
height: 63vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-63vmin);
}
.floor-bottom__front {
background-color: #0b0d10;
background-image: linear-gradient(to right, transparent 0 7vmin, rgba(224, 46, 36, 0.1), transparent 19.25vmin 24.5vmin, rgba(224, 46, 36, 0.1), transparent 38.5vmin 43.75vmin, rgba(224, 46, 36, 0.1), transparent 56vmin);
}
.floor-bottom__back {
background-color: #0b0d10;
}
.floor-bottom__left {
background-color: #0b0d10;
}
.floor-bottom__right {
background-color: #0b0d10;
background-image: linear-gradient(to right, transparent 10%, rgba(24, 150, 222, 0.05) 20%, transparent 50%);
}
.floor-bottom__top {
background-color: #0b0d10;
background-image: linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.4) 5%, rgba(112, 38, 29, 0.35) 30% 70%, rgba(224, 46, 36, 0.4) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.4) 5%, rgba(112, 38, 29, 0.35) 30% 70%, rgba(224, 46, 36, 0.4) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.4) 5%, rgba(112, 38, 29, 0.35) 30% 70%, rgba(224, 46, 36, 0.4) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5));
background-position: 45.5vmin 0%, 26.25vmin 0%, 8.75vmin 0%, 0 0;
background-size: 8.75vmin 100%, 10.5vmin 100%, 8.75vmin 100%, 100% 100%;
background-repeat: no-repeat;
}
.floor-bottom__bottom {
background-color: #070707;
}
.floor-top {
transform: translateZ(3.5vmin);
}
.floor-top__front {
background-color: #0b0d10;
background-image: linear-gradient(to right, transparent 0 7vmin, rgba(224, 46, 36, 0.05), transparent 19.25vmin 24.5vmin, rgba(224, 46, 36, 0.05), transparent 38.5vmin 43.75vmin, rgba(224, 46, 36, 0.05), transparent 56vmin);
}
.floor-top__back {
background-color: #0b0d10;
}
.floor-top__left {
background-color: #0b0d10;
}
.floor-top__right {
background-color: #0b0d10;
background-image: linear-gradient(to right, transparent 10%, rgba(24, 150, 222, 0.05) 20%, transparent 50%);
}
.floor-top__top {
background-color: #222a27;
background-image: linear-gradient(rgba(67, 148, 131, 0.155) 0.175vmin, transparent 0.175vmin), linear-gradient(to right, rgba(67, 148, 131, 0.155) 0.175vmin, transparent 0.175vmin);
background-size: 2.625vmin 2.625vmin;
overflow: hidden;
}
.floor-top__top::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, transparent, rgba(24, 150, 222, 0.035) 40% 60%, transparent), radial-gradient(circle, transparent 68%, rgba(25, 29, 32, 0.85)), linear-gradient(to bottom, rgba(0, 1, 1, 0.75), rgba(11, 13, 16, 0.5) 17%, transparent 40%), linear-gradient(to bottom, rgba(11, 13, 16, 0.65), transparent 25%), linear-gradient(to right, rgba(0, 1, 1, 0.35) 10%, rgba(11, 13, 16, 0.5) 12%, transparent 20%), linear-gradient(to right, rgba(11, 13, 16, 0.5), transparent 25%);
}
.floor-top__top .lightft {
position: absolute;
}
.floor-top__top .lightft-01 {
bottom: -3.5vmin;
right: 8.75vmin;
width: 15.75vmin;
height: 31.5vmin;
transform-origin: top left;
transform: rotateZ(-45deg);
border-radius: 50%;
background-image: radial-gradient(rgba(24, 150, 222, 0.15), rgba(16, 77, 144, 0.1));
box-shadow: 0 0 3.5vmin 8.75vmin rgba(16, 77, 144, 0.075);
filter: blur(0.875vmin);
}
.floor-top__top .lightft-02 {
bottom: 17.5vmin;
left: 5.25vmin;
width: 21vmin;
height: 15.75vmin;
transform-origin: top left;
transform: skewX(45deg);
border-radius: 50%;
background-image: radial-gradient(rgba(235, 225, 176, 0.1), rgba(235, 225, 176, 0.05), transparent);
filter: blur(2.625vmin);
}
.floor-top__top .lightft-03 {
bottom: 3.5vmin;
left: 8.75vmin;
width: 1.75vmin;
height: 35vmin;
background-image: linear-gradient(to right, rgba(24, 150, 222, 0.4), rgba(24, 150, 222, 0.2));
filter: blur(1.3125vmin);
}
.floor-top__top .lightft-04 {
top: 18.375vmin;
left: 5.25vmin;
width: 40.25vmin;
height: 12.25vmin;
background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.85), rgba(11, 13, 16, 0.6) 40%, rgba(11, 13, 16, 0.2));
transform-origin: too left;
transform: skewX(15deg);
filter: blur(0.875vmin);
}
.floor-top__top .lightft-05 {
top: 3.5vmin;
right: 0;
width: 19.25vmin;
height: 19.25vmin;
background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.9), rgba(11, 13, 16, 0.8) 40%, rgba(11, 13, 16, 0.2));
filter: blur(1.3125vmin);
}
.floor-top__top .lightft-06 {
top: 8.75vmin;
right: 7vmin;
width: 8.75vmin;
height: 24.5vmin;
transform-origin: top left;
transform: skewX(45deg);
background-image: linear-gradient(to bottom, rgba(171, 241, 241, 0.15), transparent);
filter: blur(0.875vmin);
}
.floor-top__top .lightft-07 {
bottom: 5.6875vmin;
left: 28vmin;
width: 3.5vmin;
height: 3.5vmin;
transform-origin: bottom left;
transform: skewY(47deg);
background-color: rgba(86, 182, 237, 0.075);
filter: blur(0.7vmin);
}
.floor-top__top .lightft-08 {
bottom: 15.75vmin;
left: 4.375vmin;
width: 26.25vmin;
height: 13.125vmin;
transform-origin: bottom left;
transform: skewY(47deg);
background-image: linear-gradient(to right, rgba(2, 3, 2, 0.05), transparent);
border: 0.04375vmin solid rgba(67, 148, 131, 0.6);
filter: blur(0.875vmin);
}
.floor-top__top .lightft-09 {
bottom: 0vmin;
left: 3.5vmin;
width: 59.5vmin;
height: 29.3125vmin;
transform-origin: top left;
background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.075), rgba(11, 13, 16, 0.7));
filter: blur(0.4375vmin);
}
.floor-top__top .lightft-10 {
top: 24.5vmin;
left: 42.4375vmin;
width: 3.5vmin;
height: 29.3125vmin;
transform-origin: top left;
transform: skewX(45deg);
background-image: linear-gradient(to bottom, rgba(11, 13, 16, 0.2), rgba(11, 13, 16, 0.025));
filter: blur(0.21875vmin);
}
.floor-top__top .lightft-11 {
top: 21vmin;
left: 5.6875vmin;
width: 14vmin;
height: 10.5vmin;
transform-origin: top left;
transform: skewY(47deg);
background-image: linear-gradient(to right, rgba(171, 241, 241, 0.0875), rgba(171, 241, 241, 0.0125) 80%, transparent);
filter: blur(0.4375vmin);
}
.floor-top__top .lightft-12 {
opacity: 0.115;
top: 3.9375vmin;
right: 7.875vmin;
height: 38.5vmin;
width: 7vmin;
border-right: 1.3125vmin solid #abf1f1;
border-bottom: 1.3125vmin solid #abf1f1;
animation: line 2000ms linear infinite;
}
.floor-top__top .lightft-12::after {
content: "";
position: absolute;
top: 103.5%;
width: 100%;
height: 100%;
border-left: 1.3125vmin solid #abf1f1;
}
.floor-top__bottom {
background-color: #0b0d10;
background-image: linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.35) 5%, rgba(112, 38, 29, 0.3) 30% 70%, rgba(224, 46, 36, 0.35) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.35) 5%, rgba(112, 38, 29, 0.3) 30% 70%, rgba(224, 46, 36, 0.35) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), linear-gradient(to right, rgba(230, 89, 81, 0.85), rgba(224, 46, 36, 0.85) 2%, rgba(224, 46, 36, 0.35) 5%, rgba(112, 38, 29, 0.3) 30% 70%, rgba(224, 46, 36, 0.35) 95%, rgba(224, 46, 36, 0.85), rgba(230, 89, 81, 0.85)), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5));
background-position: 45.5vmin 0%, 26.25vmin 0%, 8.75vmin 0%, 0 0;
background-size: 8.75vmin 100%, 10.5vmin 100%, 8.75vmin 100%, 100% 100%;
background-repeat: no-repeat;
}
@keyframes line {
0%, 30% {
opacity: 0.11;
}
50%, 70% {
opacity: 0.175;
}
}
.floor-a,
.floor-b,
.floor-c,
.floor-d {
width: 8.75vmin;
height: 63vmin;
position: absolute;
top: 0;
transform: translateZ(0.875vmin);
}
.floor-a__front,
.floor-b__front,
.floor-c__front,
.floor-d__front {
width: 8.75vmin;
height: 2.625vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(60.375vmin);
}
.floor-a__back,
.floor-b__back,
.floor-c__back,
.floor-d__back {
width: 8.75vmin;
height: 2.625vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-8.75vmin) translateY(-2.625vmin);
}
.floor-a__right,
.floor-b__right,
.floor-c__right,
.floor-d__right {
width: 63vmin;
height: 2.625vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(8.75vmin) translateX(-63vmin) translateY(-2.625vmin);
}
.floor-a__left,
.floor-b__left,
.floor-c__left,
.floor-d__left {
width: 63vmin;
height: 2.625vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.625vmin);
}
.floor-a__top,
.floor-b__top,
.floor-c__top,
.floor-d__top {
width: 8.75vmin;
height: 63vmin;
transform-origin: top left;
transform: translateZ(2.625vmin);
}
.floor-a__bottom,
.floor-b__bottom,
.floor-c__bottom,
.floor-d__bottom {
width: 8.75vmin;
height: 63vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-8.75vmin);
}
.floor-a {
left: 0;
}
.floor-a__front {
background-color: #0b0d10;
}
.floor-a__back {
background-color: #0b0d10;
}
.floor-a__left {
background-color: #0b0d10;
}
.floor-a__right {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.5), rgba(224, 46, 36, 0.1) 50%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-a__top {
background-color: #0b0d10;
}
.floor-a__bottom {
background-color: #0b0d10;
}
.floor-b {
left: 17.5vmin;
}
.floor-b__front {
background-color: #0b0d10;
}
.floor-b__back {
background-color: #0b0d10;
}
.floor-b__left {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-b__right {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.45), rgba(224, 46, 36, 0.2) 20%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-b__top {
background-color: #0b0d10;
}
.floor-b__bottom {
background-color: #0b0d10;
}
.floor-c {
left: 36.75vmin;
}
.floor-c__front {
background-color: #0b0d10;
}
.floor-c__back {
background-color: #0b0d10;
}
.floor-c__left {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-c__right {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-c__top {
background-color: #0b0d10;
}
.floor-c__bottom {
background-color: #0b0d10;
}
.floor-d {
left: 54.25vmin;
}
.floor-d__front {
background-color: #0b0d10;
}
.floor-d__back {
background-color: #0b0d10;
}
.floor-d__left {
background-color: #0b0d10;
background-image: linear-gradient(to top, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), linear-gradient(to bottom, rgba(237, 131, 125, 0.25), rgba(224, 46, 36, 0.1) 30%), radial-gradient(transparent 70%, rgba(224, 46, 36, 0.5)), linear-gradient(to bottom, rgba(224, 46, 36, 0.75), rgba(112, 38, 29, 0.75) 40%, rgba(62, 40, 35, 0.75));
background-repeat: no-repeat;
}
.floor-d__right {
background-color: #0b0d10;
background-image: linear-gradient(to right, transparent 10%, rgba(24, 150, 222, 0.05) 20%, transparent 50%);
}
.floor-d__top {
background-color: #0b0d10;
}
.floor-d__bottom {
background-color: #0b0d10;
}
.wall-left {
width: 3.5vmin;
height: 63vmin;
position: absolute;
top: 0;
left: 0;
transform: translateZ(4.375vmin);
}
.wall-left__front {
width: 3.5vmin;
height: 45.5vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(17.5vmin);
}
.wall-left__back {
width: 3.5vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-3.5vmin) translateY(-45.5vmin);
}
.wall-left__right {
width: 63vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vmin) translateX(-63vmin) translateY(-45.5vmin);
}
.wall-left__left {
width: 63vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-45.5vmin);
}
.wall-left__top {
width: 3.5vmin;
height: 63vmin;
transform-origin: top left;
transform: translateZ(45.5vmin);
}
.wall-left__bottom {
width: 3.5vmin;
height: 63vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-3.5vmin);
}
.wall-left__front {
background-image: linear-gradient(to bottom, #242d2a, #0b0d10);
}
.wall-left__back {
background-color: #0b0d10;
}
.wall-left__left {
background-color: #0b0d10;
}
.wall-left__right {
background-color: #242d2a;
background-image: linear-gradient(to bottom, #abf1f1, #439483), linear-gradient(to right, rgba(11, 13, 16, 0.1) 55%, rgba(11, 13, 16, 0.65) 95%, rgba(11, 13, 16, 0.85)), linear-gradient(to bottom, rgba(11, 13, 16, 0.5), #344036 20%, #242d2a 90%, rgba(11, 13, 16, 0.5)), linear-gradient(to left, #344036, #242d2a);
background-position: 0 0, 0 100%, 0 0, 0 0;
background-size: 22.25% 4%, 11% 90%, 100% 100%, 100% 100%;
background-repeat: no-repeat;
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
}
.wall-left__top {
background-color: #0b0d10;
border-left: 0.175vmin solid rgba(235, 225, 176, 0.1);
border-top: 0.175vmin solid rgba(235, 225, 176, 0.1);
}
.wall-left__bottom {
background-color: #0b0d10;
}
.wall-left0 {
width: 1.75vmin;
height: 59.5vmin;
position: absolute;
top: 3.5vmin;
left: 3.5vmin;
transform: translateZ(44.625vmin);
}
.wall-left0__front {
width: 1.75vmin;
height: 3.5vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(56vmin);
}
.wall-left0__back {
width: 1.75vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.75vmin) translateY(-3.5vmin);
}
.wall-left0__right {
width: 59.5vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.75vmin) translateX(-59.5vmin) translateY(-3.5vmin);
}
.wall-left0__left {
width: 59.5vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3.5vmin);
}
.wall-left0__top {
width: 1.75vmin;
height: 59.5vmin;
transform-origin: top left;
transform: translateZ(3.5vmin);
}
.wall-left0__bottom {
width: 1.75vmin;
height: 59.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-1.75vmin);
}
.wall-left0__front {
background-color: #222a27;
}
.wall-left0__back {
background-color: #242d2a;
}
.wall-left0__left {
background-color: #242d2a;
}
.wall-left0__right {
background-color: #191d20;
background-image: linear-gradient(to left, rgba(235, 225, 176, 0.075), rgba(132, 149, 108, 0.075), transparent 30%);
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
}
.wall-left0__top {
background-color: #0b0d10;
background-image: linear-gradient(to right, rgba(171, 241, 241, 0.4), rgba(171, 241, 241, 0.2));
}
.wall-left0__bottom {
background-color: #0b0d10;
}
.wall-left1 {
width: 1.75vmin;
height: 45.5vmin;
position: absolute;
top: 3.5vmin;
left: 3.5vmin;
transform: translateZ(48.125vmin);
}
.wall-left1__front {
width: 1.75vmin;
height: 1.75vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(43.75vmin);
}
.wall-left1__back {
width: 1.75vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-1.75vmin) translateY(-1.75vmin);
}
.wall-left1__right {
width: 45.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.75vmin) translateX(-45.5vmin) translateY(-1.75vmin);
}
.wall-left1__left {
width: 45.5vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.wall-left1__top {
width: 1.75vmin;
height: 45.5vmin;
transform-origin: top left;
transform: translateZ(1.75vmin);
}
.wall-left1__bottom {
width: 1.75vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-1.75vmin);
}
.wall-left1__front {
background-color: #191d20;
background-image: linear-gradient(to right, rgba(171, 241, 241, 0.4), rgba(171, 241, 241, 0.2));
}
.wall-left1__back {
background-color: #242d2a;
}
.wall-left1__left {
background-color: red;
}
.wall-left1__right {
background-color: #191d20;
background-image: linear-gradient(to left, rgba(235, 225, 176, 0.075), rgba(132, 149, 108, 0.075), transparent 38%);
}
.wall-left1__top {
background-color: #0b0d10;
}
.wall-left1__bottom {
background-color: #0b0d10;
}
.wall-left2 {
width: 0.875vmin;
height: 56vmin;
position: absolute;
top: 0;
left: 3.5vmin;
transform: translateZ(4.375vmin);
}
.wall-left2__front {
width: 0.875vmin;
height: 40.25vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(15.75vmin);
}
.wall-left2__back {
width: 0.875vmin;
height: 40.25vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-0.875vmin) translateY(-40.25vmin);
}
.wall-left2__right {
width: 56vmin;
height: 40.25vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.875vmin) translateX(-56vmin) translateY(-40.25vmin);
}
.wall-left2__left {
width: 56vmin;
height: 40.25vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-40.25vmin);
}
.wall-left2__top {
width: 0.875vmin;
height: 56vmin;
transform-origin: top left;
transform: translateZ(40.25vmin);
}
.wall-left2__bottom {
width: 0.875vmin;
height: 56vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-0.875vmin);
}
.wall-left2__front {
background-color: #0b0d10;
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
}
.wall-left2__back {
background-color: #242d2a;
}
.wall-left2__left {
background-color: #242d2a;
}
.wall-left2__right {
background-color: #242d2a;
background-image: linear-gradient(-45deg, rgba(11, 13, 16, 0.5) 63%, transparent 65%), linear-gradient(to bottom, rgba(14, 16, 18, 0.6), transparent 12% 68%, rgba(14, 16, 18, 0.6));
background-position: 0% 100%, 0 0, 0 0;
background-size: 100% 35.875vmin, 100% 100%, 100% 100%;
background-repeat: no-repeat;
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
}
.wall-left2__right::before {
content: "";
position: absolute;
bottom: 14vmin;
right: 5.25vmin;
width: 12.25vmin;
height: 2.625vmin;
background-image: linear-gradient(to left, rgba(171, 241, 241, 0.15), rgba(171, 241, 241, 0.05));
filter: blur(1.75vmin);
}
.wall-left2__right .lightl2l {
position: absolute;
filter: blur(1.3125vmin);
}
.wall-left2__right .lightl2l-01 {
right: 1.75vmin;
width: 17.5vmin;
height: 7vmin;
background-image: radial-gradient(rgba(235, 225, 176, 0.9), rgba(132, 149, 108, 0.5), transparent);
}
.wall-left2__right .lightl2l-02 {
top: 10.5vmin;
right: 3.5vmin;
width: 100%;
height: 29.75vmin;
background-image: linear-gradient(to left, rgba(77, 169, 150, 0.5), rgba(67, 148, 131, 0.35) 20%, rgba(67, 148, 131, 0.25), rgba(67, 148, 131, 0.025));
}
.wall-left2__right .lightl2l-03 {
right: 14vmin;
width: 14vmin;
height: 7vmin;
background-image: radial-gradient(rgba(235, 225, 176, 0.25), rgba(132, 149, 108, 0.1), transparent);
border-radius: 50%;
}
.wall-left2__right .lightl2l-04 {
right: 17.5vmin;
width: 24.5vmin;
height: 7vmin;
background-image: linear-gradient(to left, rgba(235, 225, 176, 0.2), rgba(132, 149, 108, 0.1) 80%, transparent);
}
.wall-left2__top {
background-color: #191d20;
background-image: radial-gradient(transparent 70%, rgba(11, 13, 16, 0.5)), linear-gradient(to right, rgba(235, 225, 176, 0.2), transparent 30% 80%, rgba(11, 13, 16, 0.5));
}
.wall-left2__bottom {
background-color: #0b0d10;
}
.wall-back {
width: 59.5vmin;
height: 3.5vmin;
position: absolute;
top: 0;
right: 0;
transform: translateZ(4.375vmin);
}
.wall-back__front {
width: 59.5vmin;
height: 45.5vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-42vmin);
}
.wall-back__back {
width: 59.5vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-59.5vmin) translateY(-45.5vmin);
}
.wall-back__right {
width: 3.5vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(59.5vmin) translateX(-3.5vmin) translateY(-45.5vmin);
}
.wall-back__left {
width: 3.5vmin;
height: 45.5vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-45.5vmin);
}
.wall-back__top {
width: 59.5vmin;
height: 3.5vmin;
transform-origin: top left;
transform: translateZ(45.5vmin);
}
.wall-back__bottom {
width: 59.5vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-59.5vmin);
}
.wall-back__front {
background-image: linear-gradient(to bottom, #abf1f1, #439483), linear-gradient(45deg, rgba(11, 13, 16, 0.45) 37%, transparent 37%), linear-gradient(to bottom, #242d2a, #0b0d10);
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
background-size: 15.5% 4%, 9% 100%, 100% 100%;
background-position: 3% 0, 100% 100%, 0 0;
background-repeat: no-repeat;
}
.wall-back__back {
background-color: #0b0d10;
}
.wall-back__left {
background-color: #0b0d10;
}
.wall-back__right {
background-image: linear-gradient(to bottom, #191d20, #0b0d10);
}
.wall-back__top {
background-color: #0b0d10;
border-top: 0.175vmin solid rgba(235, 225, 176, 0.1);
}
.wall-back__bottom {
background-color: #0b0d10;
}
.wall-back0 {
width: 57.75vmin;
height: 1.75vmin;
position: absolute;
top: 3.5vmin;
right: 0;
transform: translateZ(44.625vmin);
}
.wall-back0__front {
width: 57.75vmin;
height: 3.5vmin;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-1.75vmin);
}
.wall-back0__back {
width: 57.75vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-57.75vmin) translateY(-3.5vmin);
}
.wall-back0__right {
width: 1.75vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(57.75vmin) translateX(-1.75vmin) translateY(-3.5vmin);
}
.wall-back0__left {
width: 1.75vmin;
height: 3.5vmin;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-3.5vmin);
}
.wall-back0__top {
width: 57.75vmin;
height: 1.75vmin;
transform-origin: top left;
transform: translateZ(3.5vmin);
}
.wall-back0__bottom {
width: 57.75vmin;
height: 1.75vmin;
transform-origin: top left;
transform: rotateY(180deg) translateX(-57.75vmin);
}
.wall-back0__front {
background-image: linear-gradient(to bottom, #344036, #242d2a);
border-bottom: 0.35vmin solid rgba(67, 148, 131, 0.9);
}
.wall-back0__back {
background-color: #242d2a;
}
.wall-back0__left {
background-color: #242d2a;
}
.wall-back0__right {
background-color: #171a1d;
}
.wall-back0__top {
background-color: #0b0d10;
background-image: linear-gradient(to bottom, rgba(171, 241, 241, 0.4), rgba(171, 241, 241, 0.25));
}
.wall-back0__bottom {
background-color: #0b0d10;
}
.wall-back1 {
width: 49vmin;
height: 1.75vmin;
position: absolute;
top: 3.5vmin;
right: 0;
transform: translateZ(48.125vmin);
}
.wall-back1__front {
width: 49vmin;
height: 1.75vmi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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