纯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);
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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