纯css实现纪念碑谷2游戏动画效果代码
代码语言：html
所属分类：动画
代码描述：纯css实现纪念碑谷2游戏动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100vh; width: 100vw;
min-height: 60vw;
padding: 0; margin: 0;
background: black;
--animation: 90s infinite;
}
body::after {
content: '';
position: absolute;
display: block;
top: 0; left: 50%;
width: 454px; height: 798px;
transform: translateX(-50%);
animation: frame var(--animation) ease;
}
.frame {
position: relative;
width: 454px; height: 798px;
margin: auto;
background: #3D2E36;
overflow: hidden;
}
.scene {
position: relative;
font-size: 4px;
perspective: 100000px;
animation: scene var(--animation) linear;
}
.scene *, .scene *:before, .scene *:after {
content: '';
position: absolute;
transform-style: preserve-3d;
transform-origin: 0 0 0;
}
.cover {
position: absolute;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
mix-blend-mode: hard-light;
font-family: "Prompt", sans-serif;
color: white;
z-index: 999;
animation: cover var(--animation) ease;
}
.cover::before {
content: "│││";
width: 296px; height: 48px;
border-bottom: 2px solid white;
font-size: 22px;
text-align: center;
letter-spacing: -15px;
line-height: 16px;
}
.cover h1 {
margin: 40px 0 26px;
font-size: 58px;
font-weight: 500;
text-transform: uppercase;
line-height: 67px;
}
.cover h2 {
width: 296px;
margin: 36px 0 84px;
font-weight: 200;
font-size: 21px;
text-transform: uppercase;
text-align: center;
line-height: 24px;
letter-spacing: -1px;
}
.cover h3 {
width: 296px;
margin: 0;
font-weight: 200;
font-size: 15px;
line-height: 6px;
text-align: center;
background: linear-gradient(0deg, white, white) 0px 2px / 105px 2px no-repeat, linear-gradient(0deg, white, white) 191px 2px / 105px 2px no-repeat;
}
.cover .cover__button {
position: relative;
width: 42px; height: 42px;
border-radius: 99em;
box-shadow: inset 0 0 0 4px white;
transform-origin: center center;
animation: coverButton var(--animation) ease;
}
.cover .cover__button::before {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 99em;
box-shadow: 0 0 0 2px white;
}
.cover .cover__button::after {
content: '';
position: absolute;
top: -4px; left: -4px;
width: 50px; height: 50px;
border-radius: 999em;
box-shadow: 0 0 0 1px white;
transform-origin: center center;
animation: coverButtonShadow var(--animation) ease;
}
.building-1 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(25em, 176em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
--left-default-light: #FF676A;
--left-default-dark: #E34848;
--left-accent-light: #FFD4A3;
--left-accent-dark: #EDB88C;
--top-default-light: #FF8D7F;
--top-default-dark: #F36E5A;
--top-accent-light: #FFF8F5;
--top-accent-dark: #FCD3D7;
--right-default-light: #904872;
--right-default-dark: #6F305B;
--right-accent-light: #E6A79C;
--right-accent-dark: #C88884;
--left-window-inner: #461336;
--left-window-v: #66274C;
--right-window-v: #973B5D;
--right-window-inner: #742849;
--left-window-h: #9B3C4D;
--right-window-h: #A14C6D;
}
.building-1::before {
width: 100%; height: 39em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg);
}
.building-1 > div:nth-child(1) {
height: 8em; width: 1em;
background: var(--top-default-light);
transform: translateY(-8em) translateZ(8em);
}
.building-1 > div:nth-child(1)::before {
width: 62em; height: 23em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.5em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 23em, 23em 23em, 23em 8em, 15em 8em, 15em 0em, 7em 0em, 7em 8em, 0em 8em);
transform: rotateY(90deg) translateX(-15em);
}
.building-1 > div:nth-child(1)::after {
width: 8em; height: 8em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(-90deg);
}
.building-1 > div:nth-child(2) {
height: 62em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
transform: translate(15em, -39em) translateZ(-47em) rotateX(-90deg);
transform-origin: bottom left;
}
.building-1 > div:nth-child(2)::before {
height: 23em; width: 15em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 0.75em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 23em, 0em 23em, 0em 15em, 1em 15em, 1em 7em, 0em 7em);
transform: translate(-15em, -8em) translateZ(-23em);
}
.building-1 > div:nth-child(2)::after {
height: 70em; width: 23em;
background: linear-gradient(var(--left-default-dark), var(--left-default-dark)) 1.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 8.5em 10em/1.5em 2em no-repeat, linear-gradient(var(--left-default-dark), var(--left-default-dark)) 12em 10em/1.5em 2em no-repeat, var(--left-default-light);
clip-path: polygon(0em 8em, 0em 70em, 23em 70em, 23em 0em, 22em 0em, 22em 1em, 21em 1em, 21em 2em, 20em 2em, 20em 3em, 19em 3em, 19em 4em, 18em 4em, 18em 5em, 17em 5em, 17em 6em, 16em 6em, 16em 7em, 15em 7em, 15em 8em);
transform: translateY(-8em) rotateY(90deg);
}
.building-1 > div:nth-child(3) {
height: 8em; width: 95em;
background: linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 1em/95em 0.3em no-repeat, linear-gradient(var(--top-default-dark), var(--top-default-dark)) 0em 7em/95em 0.3em no-repeat, var(--top-default-light);
transform: translateY(-8em) translateZ(23em);
}
.building-1 > div:nth-child(3)::before {
height: 15em; width: 15em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 8em 0em, 8em 4em, 9.2em 5.9em, 11.3em 7em, 15em 7em, 15em 15em, 0em 15em);
transform: translate(15em, 16em) translateZ(-8em);
}
.building-1 > div:nth-child(3)::after {
height: 30em; width: 72em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 2em/3em 2em repeat-x, var(--right-default-light);
clip-path: polygon(0em 0em, 72em 0em, 72em 28em, 46em 28em, 46em 18em, 45em 15em, 44em 13em, 43em 11.7em, 42em 10.6em, 41em 9.8em, 40em 9.1em, 39em 8.6em, 37em 8em, 35em 8em, 31em 8.3em, 30em 8.5em, 29em 8.9em, 27em 10.1em, 26em 11.1em, 25em 12.3em, 24em 13.7em, 23.4em 15.5em, 23em 30em, 0em 30em);
transform: translate(23em, 8em) rotateX(-90deg);
}
.building-1 > div:nth-child(4) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateX(15em) translateZ(23em);
}
.building-1 > div:nth-child(4)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(4)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(5) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 3em) translateZ(20em);
}
.building-1 > div:nth-child(5)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(5)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(6) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(15em, 6em) translateZ(17em);
}
.building-1 > div:nth-child(6)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(6)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
.building-1 > div:nth-child(7) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 1em) translateZ(22em) rotateX(90deg);
}
.building-1 > div:nth-child(7)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(7)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(8) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 4em) translateZ(19em) rotateX(90deg);
}
.building-1 > div:nth-child(8)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(8)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-4em) translateZ(-4em);
}
.building-1 > div:nth-child(9) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(15em, 7em) translateZ(16em) rotateX(90deg);
}
.building-1 > div:nth-child(9)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translate(-14em, 7em) translateZ(8em);
}
.building-1 > div:nth-child(9)::after {
width: 6em; height: 3em;
background: var(--left-default-light);
transform: translate(-14em, 7em) translateZ(8em) rotateY(-90deg);
}
.building-1 > div:nth-child(10) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(1em, -7em) translateZ(26em);
}
.building-1 > div:nth-child(10)::before {
width: 22.9em; height: 24em;
background: var(--top-default-light);
clip-path: polygon(0em 0em, 23em 0em, 23em 16.3em, 12em 16.3em, 12em 16.3em, 12em 16.3em, 13em 15.6em, 14em 15em, 15em 13em, 15em 11em, 14em 9.3em, 13em 8.6em, 12em 7.8em, 0em 7.8em);
transform: translate(67.9em, 7.3em) translateZ(-25.9em);
}
.building-1 > div:nth-child(10)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 15.4em) translateZ(-35em);
}
.building-1 > div:nth-child(11) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(82em, 8.4em) translateZ(-10em);
}
.building-1 > div:nth-child(11)::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(11)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(12) {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translate(79em, 8.4em) translateZ(-13em);
}
.building-1 > div:nth-child(12)::before {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(12)::after {
width: 1em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(13) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(82em, 8.3em) translateZ(-10.0em) rotateY(90deg);
}
.building-1 > div:nth-child(13)::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(13)::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(14) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(81em, 8.3em) translateZ(-12em) rotateY(-90deg);
}
.building-1 > div:nth-child(14)::before {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(14)::after {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(15) {
width: 1em; height: 7.7em;
background: var(--left-default-light);
transform: translate(78em, 8.3em) translateZ(-15em) rotateY(-90deg);
}
.building-1 > div:nth-child(15)::before {
width: 1em; height: 8em;
background: var(--left-default-light);
transform: translateX(-1em) translateZ(1em);
}
.building-1 > div:nth-child(15)::after {
width: 80em; height: 56em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 80em 0em, 80em 8em, 75em 8em, 67em 8.2em, 67em 16.1em, 51em 16.1em, 51em 24.1em, 50em 24.1em, 50em 25.1em, 49em 25.1em, 49em 26.1em, 48em 26.1em, 48em 27.1em, 47em 27.1em, 47em 28.1em, 46em 28.1em, 46em 29.1em, 45em 29.1em, 45em 30.1em, 44em 30.1em, 44em 31.1em, 43em 31.1em, 43em 32.1em, 42em 32.1em, 42em 33em, 41em 33em, 41em 34em, 40em 34em, 40em 35em, 39em 35em, 39em 36em, 38em 36em, 38em 37em, 37em 37em, 37em 38em, 36em 38em, 36em 39em, 35em 39em, 35em 55.1em, 0em 55.1em);
transform: translate(-52em, -16.4em) translateZ(9em);
}
.building-1 > div:nth-child(16) {
width: 8em; height: 8em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 8em) translateZ(-16em);
}
.building-1 > div:nth-child(16)::before {
width: 16em; height: 7.7em;
background: var(--top-default-light);
transform: translateX(14.4em) translateY(1em) translateZ(8.5em);
}
.building-1 > div:nth-child(16)::after {
width: 22em; height: 19.5em;
background: linear-gradient(90deg, var(--right-default-light) 50%, var(--left-default-light));
transform: translateY(0em) translateZ(-3.5em) rotateX(90deg);
}
.building-1 > div:nth-child(17) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 16em) translateZ(-17em);
}
.building-1 > div:nth-child(17)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(17)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(18) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 19em) translateZ(-20em);
}
.building-1 > div:nth-child(18)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(18)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(19) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 22em) translateZ(-23em);
}
.building-1 > div:nth-child(19)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(19)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(20) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 25em) translateZ(-26em);
}
.building-1 > div:nth-child(20)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(20)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(21) {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translate(69em, 28em) translateZ(-29em);
}
.building-1 > div:nth-child(21)::before {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(1em) translateZ(-1em);
}
.building-1 > div:nth-child(21)::after {
width: 8em; height: 1em;
background: var(--top-default-light);
transform: translateY(2em) translateZ(-2em);
}
.building-1 > div:nth-child(22) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 16em) translateZ(-17em) rotateX(90deg);
}
.building-1 > div:nth-child(22)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(22)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(23) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 19em) translateZ(-20em) rotateX(90deg);
}
.building-1 > div:nth-child(23)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(23)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(24) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 22em) translateZ(-23em) rotateX(90deg);
}
.building-1 > div:nth-child(24)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(24)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(25) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 25em) translateZ(-26em) rotateX(90deg);
}
.building-1 > div:nth-child(25)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(25)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(26) {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translate(69em, 28em) translateZ(-29em) rotateX(90deg);
}
.building-1 > div:nth-child(26)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-1em) translateZ(-1em);
}
.building-1 > div:nth-child(26)::after {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: translateY(-2em) translateZ(-2em);
}
.building-1 > div:nth-child(27) {
width: 8em; height: 16em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 5px var(--top-default-light), inset 0 0 0 7px var(--top-default-dark);
transform: translate(69em, 31em) translateZ(-32em);
}
.building-1 > div:nth-child(27)::before {
width: 8em; height: 1em;
background: var(--right-default-light);
transform: rotateX(90deg);
}
.building-1 > div:nth-child(27)::after {
width: 19.5em; height: 16em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 16em 2.5em/2em 3em repeat-y, var(--left-default-light);
transform: translateX(8em) rotateY(-90deg);
}
.building-1 > div:nth-child(28) {
width: 31.2em; height: 24em;
background: linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 29.4em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 27.7em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 25.9em 1.6em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-default-dark) 50%, transparent 0%) 24.2em 3em/1.7em 3em repeat-y, var(--left-default-light);
transform: translateX(92em) translateZ(-0.2em) rotateY(-90deg);
}
.building-1 > div:nth-child(28)::before {
width: 86em; height: 47em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 47em, 56em 47em, 56em 46em, 57em 46em, 57em 45em, 58em 45em, 58em 44em, 59em 44em, 59em 43em, 60em 43em, 60em 42em, 61em 42em, 61em 41em, 62em 41em, 62em 40em, 63em 40em, 63em 24em, 90em 24em, 90em 0em);
transform: translate(-71em, 16em) translateZ(-32em) rotateX(90deg);
}
.building-1 > div:nth-child(28)::after {
width: 54.5em; height: 24em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 24em, 35em 24em, 35em 16em, 54.5em 16em, 54.5em 0em);
transform: translate(-67em, 47em) translateZ(-1em) rotateX(90deg);
}
.building-1 > div:nth-child(29) {
width: 16em; height: 16em;
background: conic-gradient(var(--top-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--top-default-dark) 180deg, var(--top-default-dark) 270deg, transparent 270deg) 0em 0em/4em 4em repeat, var(--top-default-light);
transform: translate(77em, 31em) translateZ(-12.5em);
}
.building-1 > div:nth-child(29)::before {
width: 12em; height: 12em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
.building-1 > div:nth-child(29)::after {
width: 4em; height: 12em;
background: var(--left-default-light);
transform: translate(2em, 2em) rotateY(-90deg);
}
.building-1 > div:nth-child(30) {
width: 12em; height: 4em;
background: var(--right-default-light);
transform: translate(79em, 45em) translateZ(-12.5em) rotateX(90deg);
}
.building-1 > div:nth-child(30)::before {
width: 26em; height: 1em;
background: var(--right-default-light);
transform: translate(12em, 35.5em) translateZ(20em);
}
.building-1 > div:nth-child(30)::after {
width: 26em; height: 1em;
background: var(--left-default-light);
transform: translate(12em, 35.5em) translateZ(46em) rotateY(90deg);
}
.building-1 > div:nth-child(31) {
width: 26em; height: 26em;
background: var(--top-default-light);
transform: translate(91em, -1em) translateZ(24em);
}
.building-1 > div:nth-child(31)::before {
width: 24em; height: 7em;
background: var(--right-default-light);
transform: translate(1em, 25em) translateZ(0em) rotateX(90deg);
}
.building-1 > div:nth-child(31)::after {
width: 20em; height: 6em;
background: var(--right-default-light);
transform: translate(3em, 23em) translateZ(5em) rotateX(90deg);
}
.building-1 > div:nth-child(32) {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateX(92em) translateZ(31em);
}
.building-1 > div:nth-child(32)::before {
width: 24em; height: 24em;
background: var(--top-default-light);
transform: translateZ(3em);
}
.building-1 > div:nth-child(32)::after {
width: 20em; height: 20em;
background: var(--top-default-light);
transform: translate(2em, 2em) translateZ(4em);
}
.building-1 > div:nth-child(33) {
width: 4em; height: 20em;
background: var(--left-default-light);
transform: translate(94em, 2em) translateZ(31em) rotateY(-90deg);
}
.building-1 > div:nth-child(33)::before {
width: 1em; height: 24em;
background: var(--left-default-light);
transform: translate(2em, -2em) translateZ(2em);
}
.building-1 > div:nth-child(33)::after {
width: 1em; height: 24em;
background: var(--right-default-light);
transform: translate(2em, 22em) translateZ(-22em) rotateX(90deg);
}
.building-1 > div:nth-child(34) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(3em, -5em) translateZ(9em) rotateY(-90deg);
}
.building-1 > div:nth-child(34)::before {
width: 65em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, -1em) translateZ(1em);
}
.building-1 > div:nth-child(34)::after {
width: 65em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translate(1em, 3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(35) {
width: 2em; height: 65em;
background: linear-gradient(180deg, var(--right-default-dark) 96%, transparent 0%);
transform: translate(3em, -3em) translateZ(10em) rotateX(90deg);
}
.building-1 > div:nth-child(35)::before {
width: 1em; height: 65em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
.building-1 > div:nth-child(35)::after {
width: 1em; height: 65em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
.building-1 > div:nth-child(36) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(26em);
}
.building-1 > div:nth-child(36)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(36)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(37) {
width: 27em; height: 2em;
background: var(--left-default-dark);
transform: translate(89em, -5em) translateZ(26em) rotateY(-90deg);
}
.building-1 > div:nth-child(37)::before {
width: 27em; height: 4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(-1em) translateZ(1em);
}
.building-1 > div:nth-child(37)::after {
width: 27em; height: 4em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1em, 65em 1em, 65em 3em, 0em 3em, 0em 4em, 65em 4em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(38) {
width: 2em; height: 27em;
background: var(--right-default-dark);
transform: translate(89em, -3em) translateZ(26em) rotateX(90deg);
}
.building-1 > div:nth-child(38)::before {
width: 1em; height: 27em;
background: var(--right-default-light);
transform: translateX(-1em) translateZ(2em);
}
.building-1 > div:nth-child(38)::after {
width: 1em; height: 27em;
background: var(--left-default-light);
transform: translateX(2em) rotateY(90deg);
}
.building-1 > div:nth-child(39) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -7em) translateZ(57em);
}
.building-1 > div:nth-child(39)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(39)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(40) {
width: 6em; height: 40em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(87em, -41em) translateZ(60em);
}
.building-1 > div:nth-child(40)::before {
width: 6em; height: 2em;
background: var(--right-default-light);
transform: translateY(40em) translateZ(-2em) rotateX(90deg);
}
.building-1 > div:nth-child(40)::after {
width: 2em; height: 40em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(41) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(79em, -85em) translateZ(19em);
}
.building-1 > div:nth-child(41)::before {
width: 6em; height: 3em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-3em) rotateX(90deg);
}
.building-1 > div:nth-child(41)::after {
width: 3em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(42) {
width: 53em; height: 6em;
background: var(--top-default-light);
box-shadow: inset 0 0 0 3px var(--top-default-light), inset 0 0 0 5px var(--top-default-dark);
transform: translate(79em, -85em) translateZ(22em);
}
.building-1 > div:nth-child(42)::before {
width: 53em; height: 2em;
background: var(--right-default-light);
transform: translateY(6em) translateZ(-2em) rotateX(90deg);
}
.building-1 > div:nth-child(42)::after {
width: 2em; height: 6em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(43) {
transform: translateY(15em) translateZ(55em);
}
.building-1 > div:nth-child(43)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(18em, 8em) translateZ(-50em) rotateX(-90deg);
}
.building-1 > div:nth-child(43)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(26em, 8em) translateZ(-50em) rotateX(-90deg);
}
.building-1 > div:nth-child(44) {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(11em, 15em) translateZ(-6em) rotateX(-90deg);
}
.building-1 > div:nth-child(44)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translateX(-8em);
}
.building-1 > div:nth-child(44)::after {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(69em, 20em) translateZ(32em);
}
.building-1 > div:nth-child(45) {
width: 2em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(88em, 47em) translateZ(-27em) rotateX(-90deg);
}
.building-1 > div:nth-child(45)::before {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(30em, -35em) translateZ(-31em);
}
.building-1 > div:nth-child(45)::after {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(15em, -35em) translateZ(-31em);
}
.building-1 > div:nth-child(46) {
width: 2.5em; height: 7em;
box-sizing: border-box;
background: var(--right-window-inner);
border-right: 3px solid var(--right-window-v);
border-bottom: 3px solid var(--right-window-h);
border-radius: 2em 2em 0 0;
transform: translate(110.5em, 16em) translateZ(8em) rotateX(-90deg);
}
.building-1 > div:nth-child(46)::before {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-6em) rotateY(-90deg);
}
.building-1 > div:nth-child(46)::after {
width: 2em; height: 6em;
box-sizing: border-box;
background: var(--left-window-v);
border-left: 3px solid #A42037;
border-bottom: 3px solid var(--left-window-h);
border-radius: 2em 2em 0 0;
transform: translate(-111em, 14em) translateZ(-14em) rotateY(-90deg);
}
.building-1 > div:nth-child(47) {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(68em, 34em) translateZ(-37em) rotateY(90deg);
}
.building-1 > div:nth-child(47)::before {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(6em);
}
.building-1 > div:nth-child(47)::after {
width: 6em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
.building-1 > div:nth-child(48) {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translate(91em, 14em) translateZ(17em) rotateY(90deg);
}
.building-1 > div:nth-child(48)::before {
width: 7em; height: 2em;
box-sizing: border-box;
background: var(--left-window-inner);
border-top: 3px solid var(--left-window-v);
border-right: 3px solid var(--left-window-h);
border-radius: 2em 0 0 2em;
transform: translateY(-8em);
}
.building-1 > div:nth-child(48)::after {
border-top: 5em solid transparent;
border-bottom: 5em solid transparent;
border-right: 10em solid var(--left-accent-light);
transform: translate(17.1em, 19.2em) translateZ(-5.9em) rotateY(30deg);
}
.building-1 > div:nth-child(49) {
width: 18em; height: 18em;
background: var(--top-accent-light);
transform: translate(95em, 3em) translateZ(36em);
}
.building-1 > div:nth-child(49)::before {
border-right: 5em solid transparent;
border-left: 5em solid transparent;
border-bottom: 10em solid var(--right-accent-light);
transform: translate(-15em, 36em) translateZ(-36em) rotateX(-60deg);
}
.building-1 > div:nth-child(49)::after {
width: 1em; height: 18em;
background: var(--left-accent-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(50) {
width: 15em; height: 15em;
transform: translate(96em, 4em) translateZ(36em);
}
.building-1 > div:nth-child(50)::before {
border-bottom: 8em solid transparent;
border-top: 8em solid transparent;
border-left: 16em solid var(--left-accent-light);
transform: rotateY(-60deg);
}
.building-1 > div:nth-child(50)::after {
border-right: 8em solid transparent;
border-left: 8em solid transparent;
border-top: 16em solid var(--right-accent-light);
transform: translate(0em, 16em) rotateX(120deg);
}
.building-1 > div:nth-child(51) {
width: 18em; height: 1em;
background: var(--right-accent-light);
transform: translate(95em, 21em) translateZ(36em) rotateX(-90deg);
}
.building-1 > div:nth-child(52) {
width: 3em; height: 3em;
transform: translate(103em, 10em) translateZ(53em);
}
.building-1 > div:nth-child(52)::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-light);
transform: rotateZ(90deg) rotateX(-240deg);
}
.building-1 > div:nth-child(52)::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-light);
transform: translateY(3em) rotateX(120deg);
}
.building-1 > div:nth-child(52) > div:nth-child(1)::before {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--left-accent-dark);
transform: rotateZ(90deg) rotateX(-120deg);
}
.building-1 > div:nth-child(52) > div:nth-child(1)::after {
border-left: 1.5em solid transparent;
border-right: 1.5em solid transparent;
border-top: 3em solid var(--right-accent-dark);
transform: translateY(3em) rotateX(240deg);
}
.building-1 > div:nth-child(53) {
width: 65em; height: 2em;
background: var(--left-default-dark);
transform: translate(85.7em, -88em) translateZ(-53em) rotateY(-90deg);
}
.building-1 > div:nth-child(53)::before {
width: 65em; height: 4.4em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.1em, 0em 3.1em, 0em 4.1em, 65em 4.1em, 65em 0em);
transform: translateY(-0.8em) translateZ(1.23em);
}
.building-1 > div:nth-child(53)::after {
width: 65em; height: 4.5em;
background: var(--right-default-light);
clip-path: polygon(0em 0em, 0em 1.1em, 65em 1.1em, 65em 3.0em, 0em 3.0em, 0em 4.0em, 65em 4.1em, 65em 0em);
transform: translateY(3em) translateZ(1em) rotateX(-90deg);
}
.building-1 > div:nth-child(54) {
width: 1em; height: 65em;
background: var(--right-default-dark);
transform: translate(81.7em, -80.9em) translateZ(-49em) rotateX(90deg);
}
.building-1 > div:nth-child(54)::before {
width: 0.9em; height: 65em;
background: var(--right-default-light);
transform: translateX(-2em) translateZ(2em);
}
.building-1 > div:nth-child(54)::after {
width: 1.1em; height: 65em;
background: var(--left-default-light);
transform: translateX(1em) rotateY(90deg);
}
.building-1 > div:nth-child(55) {
width: 6em; height: 6em;
background: var(--top-default-light);
transform: translate(87em, -46em) translateZ(75em);
}
.building-1 > div:nth-child(55)::before {
width: 6em; height: 15em;
background: var(--right-default-light);
transform: translateY(6em) rotateX(-90deg);
}
.building-1 > div:nth-child(55)::after {
width: 15em; height: 6em;
background: var(--left-default-light);
clip-path: polygon(0em 0em, 15em 0em, 15em 1em, 4em 1em, 3em 1.2em, 2em 1.7em, 1em 2.8em, 1em 3.6em, 2em 4.7em, 3em 5em, 15em 5em, 15em 6em, 0em 6em);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(56) {
width: 4em; height: 4em;
background: var(--top-default-light);
transform: translate(88em, -45em) translateZ(76em);
}
.building-1 > div:nth-child(56)::before {
width: 1em; height: 4em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-1 > div:nth-child(56)::after {
width: 4em; height: 1em;
background: var(--right-default-light);
transform: translateY(4em) rotateX(-90deg);
}
.building-1 > div:nth-child(57) {
width: 4em; height: 14em;
background: linear-gradient(90deg, #6C507C, #2B2258);
transform: translate(87em, -45em) translateZ(74em) rotateX(-90deg);
}
.building-1 > div:nth-child(57)::before {
border-bottom: 1em solid transparent;
border-top: 1em solid transparent;
border-left: 2em solid var(--left-accent-light);
transform: translate(2em, -2em) translateZ(1em) rotateX(90deg) rotateY(-60deg);
}
.building-1 > div:nth-child(57)::after {
border-right: 1em solid transparent;
border-left: 1em solid transparent;
border-top: 2em solid var(--right-accent-light);
transform: translate(2em, -2em) translateZ(3em) rotateX(-150deg);
}
.building-1 > .mooving-part-1 {
width: 8em; height: 24em;
background: var(--top-accent-light);
box-shadow: inset 0 0 0 3px var(--top-accent-light), inset 0 0 0 5px var(--top-accent-dark);
transform: translate(71em, -52em) translateZ(23em);
animation: b1Mp1 var(--animation) linear;
}
.building-1 > .mooving-part-1::before {
width: 16em; height: 24em;
background: linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 9em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 10.8em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 12.6em 3em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 14.3em 1.5em/1.7em 3em repeat-y, linear-gradient(0deg, var(--left-accent-dark) 50%, transparent 0%) 16.1em 3em/1.7em 3em repeat-y, var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 24em, 8em 24em, 8em 0em, 9em 0em, 9em 24em, 17em 24em, 17em 0em);
transform: rotateY(90deg);
}
.building-1 > .mooving-part-1::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: translateZ(-9em);
}
.building-1 > .mooving-part-1 > div:nth-child(1) {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateY(7em) translateZ(-17em) rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(1)::before {
width: 24em; height: 2em;
background: var(--left-accent-light);
clip-path: polygon(0em 0em, 0em 2em, 8em 2em, 8em 0em, 9em 0em, 9em 2em, 16em 2em, 16em 0em, 17em 0em, 17em 2em, 26em 2em, 26em 0em);
transform: translateZ(17em) rotateY(90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(1)::after {
width: 2em; height: 2em;
background: var(--right-accent-dark);
transform: translateZ(8em);
}
.building-1 > .mooving-part-1 > div:nth-child(2) {
width: 8em; height: 2em;
background: var(--right-accent-light);
transform: translateY(24em) translateZ(-17em) rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(2)::before {
width: 8em; height: 16em;
background: linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 9em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 10.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 12.1em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 1.5em 13.6em/3em 1.5em repeat-x, linear-gradient(90deg, var(--right-accent-dark) 50%, transparent 0%) 0em 15.1em/3em 1.5em repeat-x, var(--right-accent-light);
clip-path: polygon(0em 0em, 0em 8em, 8em 8em, 8em 9em, 0em 9em, 0em 16em, 8em 16em, 8em 0em);
transform: translateY(-17em);
}
.building-1 > .mooving-part-1 > div:nth-child(2)::after {
width: 8em; height: 24em;
background: var(--top-accent-dark);
transform: rotateX(-90deg);
}
.building-1 > .mooving-part-1 > div:nth-child(3) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 6em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(3)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(3)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 14em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(4)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5) {
width: 8em; height: 4em;
background: var(--right-accent-light);
transform: translate(-1em, 22em) translateZ(-2em) rotateX(-90deg);
animation: b1Mp1RightPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5)::before {
width: 8em; height: 4em;
background: var(--top-accent-light);
transform: rotateX(-90deg);
animation: b1Mp1TopPart var(--animation) ease;
}
.building-1 > .mooving-part-1 > div:nth-child(5)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--left-accent-light);
background: linear-gradient(45deg, var(--left-window-inner) 50%, var(--left-window-v) 0%);
transform: rotateY(90deg);
animation: b1Mp1LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 {
width: 24em; height: 8em;
background: var(--top-accent-light);
box-shadow: inset 0 3px var(--top-accent-light), inset 0 -3px var(--top-accent-light), inset 0 4px var(--top-accent-dark), inset 0 -4px var(--top-accent-dark);
transform: translate(30em, 15em) translateZ(-18em);
animation: b1Mp2 var(--animation) linear;
}
.building-1 > .mooving-part-2::before {
width: 24em; height: 62em;
background: linear-gradient(0deg, transparent 63%, var(--right-accent-light) 63%, var(--right-accent-light) 88%, transparent 0%), conic-gradient(var(--right-accent-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-accent-dark) 180deg, var(--right-accent-dark) 270deg, transparent 270deg) 0em 0em/3em 3em repeat, var(--right-accent-light);
transform: translateY(8em) rotateX(-90deg);
}
.building-1 > .mooving-part-2 > div:nth-child(1) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-6em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(1)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(1)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-13.5em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(2)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3) {
width: 4em; height: 1em;
background: var(--top-accent-light);
transform: translate(10em, 8em) translateZ(-21em);
animation: b1Mp2TopPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3)::before {
width: 4em; height: 1em;
background: var(--left-accent-light);
transform: rotateY(90deg);
animation: b1Mp2LeftPart var(--animation) ease;
}
.building-1 > .mooving-part-2 > div:nth-child(3)::after {
width: 4em; height: 4em;
box-sizing: border-box;
border: 1em solid var(--right-accent-light);
background: linear-gradient(45deg, var(--right-window-inner) 50%, var(--right-window-v) 0%);
transform: translateY(1em) rotateX(-90deg);
animation: b1Mp2RightPart var(--animation) ease;
}
.building-1 > .rocks::before {
width: 10em; height: 10em;
background: linear-gradient(45deg, #42313C 50%, transparent 0%);
transform: translateY(-8em) translateZ(-31em) rotateX(-45deg) rotateY(-190deg);
}
.building-1 > .rocks::after {
width: 10em; height: 10em;
background: linear-gradient(-134deg, #2E222F 51%, transparent 0%);
transform: translateY(-8em) translateZ(-30em) rotateX(-23deg) rotateY(-233deg) rotateZ(-14deg);
}
.building-1 > .rocks > div:nth-child(1) {
width: 6em; height: 8em;
background: #604854;
transform: translateY(-2em) translateZ(-32em) rotateX(-3deg) rotateY(160deg) rotateZ(-2deg);
}
.building-1 > .rocks > div:nth-child(1)::before {
width: 7em; height: 9em;
background: linear-gradient(195deg, transparent 19%, #553E4A 0%, #553E4A 92%, transparent 0%);
transform: translateX(6em) rotateY(-41deg);
}
.building-1 > .rocks > div:nth-child(1)::after {
width: 11em; height: 8em;
background: linear-gradient(41deg, #453344 76%, transparent 0%);
transform: translateY(8em) rotateX(76deg);
}
.building-1 > .rocks > div:nth-child(2) {
width: 7em; height: 7em;
background: linear-gradient(215deg, #473444 70%, transparent 0%);
transform: translate(-7em, 10em) translateZ(-32em) rotateX(-20deg) rotateZ(10deg);
}
.building-1 > .rocks > div:nth-child(2)::before {
width: 10em; height: 6em;
background: linear-gradient(195deg, #3B2735 70%, transparent 0%);
transform: rotateY(90deg);
}
.building-1 > .rocks > div:nth-child(2)::after {
width: 7.7em; height: 10em;
background: linear-gradient(7deg, #2C2230 91%, transparent 0%);
transform: translateY(3.4em) rotateX(-75deg) rotateY(-27deg);
}
.building-1 > .rocks > div:nth-child(3) {
width: 19em; height: 14em;
background: linear-gradient(145deg, #44313C 46%, transparent 0%);
transform: translate(15em, 15em) translateZ(-38em) rotateX(-47deg) rotateY(180deg);
}
.building-1 > .rocks > div:nth-child(3)::before {
width: 6em; height: 19em;
background: linear-gradient(113deg, transparent 7%, #684D5A 8%, #684D5A 55%, transparent 0%);
transform: translate(-40em, 10em) translateZ(-2em) rotateX(-46deg);
}
.building-1 > .rocks > div:nth-child(3)::after {
width: 10em; height: 7em;
background: linear-gradient(175deg, #623D4C 50%, transparent 0%);
transform: translate(-34em, 10em) translateZ(-2em) rotateX(-53deg) rotateY(-70deg);
}
.building-1 > .rocks > div:nth-child(4) {
width: 16.2em; height: 11em;
background: linear-gradient(123deg, #573F4B 70%, transparent 0%);
transform: translate(49em, 26em) translateZ(-44em) rotateX(-30deg) rotateY(-8deg) rotateZ(48deg);
}
.building-1 > .rocks > div:nth-child(4)::before {
width: 11em; height: 13em;
background: linear-gradient(136deg, #3F2A31 53%, transparent 0%), linear-gradient(141deg, #3F2A31 57%, transparent 0%);
transform: translateX(16.2em) rotateX(-20deg) rotateY(-60deg) rotateZ(52deg);
}
.building-1 > .rocks > div:nth-child(4)::after {
width: 4em; height: 17em;
background: linear-gradient(78deg, transparent 31%, #5A4551 31%, #5A4551 44%, transparent 0%), linear-gradient(72deg, transparent 23%, #5A4551 23%, #5A4551 38%, transparent 0%);
transform: translate(19em, 11em) translateZ(11em) rotateY(40deg) rotateZ(58deg);
}
.building-1 > .rocks > div:nth-child(5) {
width: 5em; height: 9em;
background: linear-gradient(143deg, #4F3945 57%, transparent 0%) 0em 6em / 5em 3em no-repeat, linear-gradient(125deg, #4F3945 30%, transparent 0%), linear-gradient(76deg, #4F3945 65%, transparent 0%) 0em 0em / 6em 6em no-repeat;
transform: translate(46em, 55.5em) translateZ(-39em) rotateX(-62deg) rotateY(-20deg) rotateZ(86deg);
}
.building-1 > .rocks > div:nth-child(6) {
width: 35em; height: 34em;
background: #3d2f36;
transform: translate(20em, 23em) translateZ(-47em) rotateX(-90deg);
}
.building-2 {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(15em, -78em) rotateX(55deg) rotateZ(-45deg);
transform-style: preserve-3d;
animation: secondBuilding var(--animation);
--left-default-light: #F94B68;
--left-default-dark: #E23A53;
--left-accent-light: #FFD4A2;
--left-accent-dark: #F1C097;
--top-default-light: #FE817C;
--top-default-dark: #FF6D68;
--top-accent-light: #ffefdc;
--top-accent-dark: #f9d1c1;
--right-default-light: #AC2F5A;
--right-default-dark: #9E1945;
--right-accent-light: #C18D90;
--right-accent-dark: #B57578;
--left-window-inner: #6F082D;
--left-window-v: #BF3B5B;
--left-window-h: #D0556E;
--right-window-inner: #720A30;
--right-window-v: #9B294A;
--right-window-h: #B64F71;
}
.building-2::before {
width: 100%; height: 19em;
background: var(--right-default-light);
transform: translateY(15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}
.building-2::after {
width: 330em; height: 301em;
background: radial-gradient(#a7a2a7, transparent 73%) 128em 133em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 128em 270em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 8em 150em/60em 46em no-repeat, radial-gradient(#a7a2a7, transparent 73%) 38em 230em/60em 16em no-repeat, radial-gradient(#ada6ad, transparent 73%) 138em 210em/80em 22em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 248em 0em/58em 70em no-repeat, linear-gradient(26deg, #3D2E36 40%, #3D2E36 100%) 0em 0em/160em 140em no-repeat, linear-gradient(26deg, #979298 40%, #c2b0b2 100%);
transform: translate(142em, -150em) translateZ(-160em) rotateX(90deg) rotateY(90deg) rotateZ(0deg);
}
.building-2 > div:nth-child(1) {
width: 19em; height: 15em;
background: var(--left-default-light);
transform: rotateY(90deg);
}
.building-2 > div:nth-child(1)::before {
width: 46em; height: 7em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 0.8em/2em 3.5em repeat-y, var(--left-default-light);
transform: translate(-46em, 8em) translateZ(15em);
}
.building-2 > div:nth-child(1)::after {
width: 62em; height: 54em;
background: linear-gradient(var(--left-default-dark) 50%, transparent 0%) 1.5em 1.4em/2em 3.5em repeat-y, var(--left-default-light);
clip-path: polygon(0em 0em, 62em 0em, 62em 33em, 9em 33em, 9em 38em, 62em 38em, 62em 54em, 0em 54em);
transform: translate(-68em, -24em) translateZ(31em);
}
.building-2 > div:nth-child(2) {
width: 25em; height: 7em;
background: var(--top-default-light);
box-shadow: inset -10.6em 0em var(--top-default-light), inset 0em 0em 0em 1.1em var(--top-default-light), inset 0em 0em 0em 1.5em var(--top-default-dark), inset -11em 0em var(--top-default-dark);
transform: translate(15em, 8em) translateZ(46em);
}
.building-2 > div:nth-child(2)::before {
width: 16em; height: 65em;
background: linear-gradient(90deg, var(--right-default-dark) 50%, transparent 0%) 1.5em 1.4em/3em 2em repeat-x, var(--right-default-light);
transform: translateY(7em) rotateX(-90deg);
}
.building-2 > div:nth-child(2)::after {
width: 8em; height: 54em;
background: var(--top-default-light);
transform: translate(16em, -32em) translateZ(22em);
}
.building-2 > div:nth-child(3) {
width: 8em; height: 53.4em;
background: var(--right-default-light);
transform: translate(31em, 30em) translateZ(68em) rotateX(-90deg);
}
.building-2 > div:nth-child(3)::before {
width: 15em; height: 48em;
background: conic-gradient(var(--right-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--right-default-dark) 180deg, var(--right-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--right-default-light);
box-shadow: inset 0 16em var(--right-default-light), inset 0 -15.5em var(--right-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em);
}
.building-2 > div:nth-child(3)::after {
width: 15em; height: 48em;
background: conic-gradient(var(--left-default-dark) 90deg, transparent 90deg, transparent 180deg, var(--left-default-dark) 180deg, var(--left-default-dark) 270deg, transparent 270deg) 0em 1em/3em 3em repeat, var(--left-default-light);
box-shadow: inset 0 16em var(--left-default-light), inset 0 -15.5em var(--left-default-light);
clip-path: polygon(0em 0em, 3em 0em, 3em 2em, 5em 2em, 5em 0em, 10em 0em, 10em 2em, 12em 2em, 12em 0em, 15em 0em, 15em 48em, 0em 48em);
transform: translate(-15em, 13em) translateZ(-30em) rotateY(90deg);
}
.building-2 > div:nth-child(4) {
width: 15em; height: 15em;
background: var(--top-default-light);
transform: translate(16em, -15em) translateZ(53em);
}
.building-2 > div:nth-child(4)::before {
width: 15em; height: 15em;
background: var(--top-default-light);
clip-path: polygon(3em 0em, 15em 0em, 15em 15em, 0em 15em, 0em 0em, 3em 0em, 3em 1em, 1em 1em, 1em 3em, 0em 3em, 0em 5em, 1em 5em, 1em 10em, 0em 10em, 0em 12em, 1em 12em, 1em 14em, 3em 14em, 3em 15em, 5em 15em, 5em 14em, 10em 14em, 10em 15em, 12em 15em, 12em 14em, 14em 14em, 14em 12em, 15em 12em, 15em 10em, 14em 10em, 14em 5em, 15em 5em, 15em 3em, 14em 3em, 14em 1em, 12em 1em, 12em 0em, 10em 0em, 10em 1em, 5em 1em, 5em 0em);
transform: translateZ(2em);
}
.building-2 > div:nth-child(4)::after {
width: 1em; height: 2em;
background: var(--right-default-light);
transform: translateY(3em) rotateX(90deg);
}
.building-2 > div:nth-child(5) {
width: 1em; height: 2em;
background: var(--right-default-light);
box-shadow: 14em 0em var(--right-default-light);
transform: translate(15em, -4em) translateZ(54em) rotateX(90deg);
}
.building-2 > div:nth-child(5)::before {
width: 1em; height: 2em;
background: var(--left-default-light);
box-shadow: -14em 0em var(--left-default-light);
transform: translateX(5em) translateZ(-4em) rotateY(90deg);
}
.building-2 > div:nth-child(5)::after {
width: 1em; height: 2em;
background: var(--left-default-light);
transform: translateX(12em) translateZ(-4em) rotateY(90deg);
}
.building-2 > div:nth-child(6) {
width: 13em; height: 13em;
transform: translate(17em, -14em) translateZ(53em);
}
.building-2 > div:nth-child(6)::before {
width: 13.5em; height: 13em;
background: var(--top-accent-light);
clip-path: polygon(0em 0em, 13.5em 6.5em, 0em 13em);
transform: rotateY(-61deg);
}
.building-2 > div:nth-child(6)::after {
bottom: 0;
height: 13.5em; width: 13em;
background: var(--top-accent-dark);
clip-path: polygon(0em 13.5em, 6.5em 0em, 13em 13.5em);
transform-origin: bot.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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