div布局构建纸片屋和森林效果
代码语言:html
所属分类:布局界面
代码描述:div布局构建纸片屋和森林效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet"> <style> :root{ --bg1: #6a05a6; --bg2: #5c0390; --bs1: #eff9f0; --bs2: #e1f4e3; --bs3: #d3eed5; --bp0: #f2f2f2; --bp1: #eff9f0; --bp2: #e1f4e3; --bp3: #d3eed5; --waterb: #7749c1; --water0: #7749c1; --water1: #5e60ce; --water2: #6930c3; --water3: #7400b8; --pine1: #5390d9; --pine2: #5e60ce; --pine3: #6930c3; --pine0: #5c25b1; --house1: #eff9f0; --house2: #e1f4e3; --house3: #d3eed5; } /* ----- Reset ----- */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; } /* ----- Base ----- */ body{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; font-family: 'Montserrat', sans-serif; background-color: var(--bg1); font-size: 1.25vw; } /* ----- Generic ----- */ .face{ position: absolute; } /* ----- Layout ----- */ .main{ position: relative; display: flex; justify-content: center; width: 50vw; height: 30vw; transform: perspective(10000px) rotateX(67deg) rotateZ(33deg) translateZ(-9vw) ; } .montaña{ position: relative; width: 30vw; height: 30vw; } .text{ position: absolute; bottom: 0; left: 0; transform-origin: bottom ; transform: rotateX(-90deg) rotateY(90deg) translateY(-2vw); color: var(--bs1); } .text::before{ content: 'GIRLSCRIPT'; color: var(--bs1); position: absolute; left: -2vw; transform: rotateX(-270deg) translateY(2.6vw) ; opacity: .5; } .montaña::before{ content: ''; position: absolute; bottom: -3%; left: -2%; width: 130%; height: 115%; background-color: var(--bg2); transform: translateZ(-.25vw); } .montaña::after{ content: ''; position: absolute; bottom: -3%; left: 0%; width: 110%; height: 150%; transform: rotateZ(10deg) skewY(-10deg) translateZ(-.25vw); transform-origin: bottom right; background-color: var(--bg2); } /* ----- Component ----- */ .base-b{ width: 100%; height: 100%; } /* ----- */ .suelo{ bottom: 0; width: 13vw; height: 30vw; } .suelo:nth-of-type(1){ left: 0; } .suelo:nth-of-type(2){ right: 0; } .suelo__front{ width: 13vw; height: 1.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(28.5vw); background-color: var(--bs1); } .suelo__back{ width: 13vw; height: 1.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-13vw) translateY(-1.5vw) ; background-color: var(--bs3); } .suelo__right{ width: 30vw; height: 1.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(13vw) translateX(-30vw) translateY(-1.5vw); background-color: var(--bs3); } .suelo__left{ width: 30vw; height: 1.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw); background-color: var(--bs1); } .suelo__top{ width: 13vw; height: 30vw; transform-origin: top left; transform: translateZ(1.5vw) ; background-color: var(--bs2); background-image: linear-gradient(to bottom, var(--bs3),var(--bs2)); } .suelo__bottom{ width: 13vw; height: 30vw; transform-origin: top left; transform: rotateY(180deg) translateX(-13vw); background-color: var(--bs3); } /* ----- */ .agua{ left: 13vw; bottom: -.75vw; width: 4vw; height: 30vw; transform: translateZ(-.25vw); } .agua__front{ width: 4vw; height: 1.2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(28.8vw); background-color: var(--water2); border-left: .75vw solid var(--waterb); border-right: .75vw solid var(--waterb); } .agua__back{ width: 4vw; height: 1.2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-1.2vw) ; background-color: var(--water3); } .agua__right{ width: 30vw; height: 1.2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-30vw) translateY(-1.2vw); background-color: var(--water2); } .agua__left{ width: 30vw; height: 1.2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.2vw); background-color: var(--water1); } .agua__top{ width: 4vw; height: 30vw; transform-origin: top left; transform: translateZ(1.2vw) ; opacity: .95; border-left: .75vw solid var(--waterb); border-right: .75vw solid var(--waterb); background-color: var(--water2); } .agua__top::before{ content: ''; position: absolute; width: 100%; height: 3vw; top: 0; opacity: .5; background-image: linear-gradient(to bottom, transparent, var(--water0), transparent); animation: agua 4s infinite; } .agua__bottom{ width: 4vw; height: 30vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); background-color: var(--water3); } /* ----- */ .camino{ width: 12.5vw; height: 6vw; left: 17vw; bottom: 20vw; transform: translateZ(1.51vw); background-image: radial-gradient( var(--pine1) 30%, transparent); opacity: .2; border-radius: 2vw; } /* ----- */ .puente{ width: 6vw; height: 3vw; left: 12vw; bottom: 22vw; transform: translateZ(1.08vw); /* background: lime; */ } .puente__front{ width: 6vw; height: .4vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(2.5vw); background-color: var(--pine1); } .puente__back{ width: 6vw; height: .4vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-.4vw) ; background-color: var(--pine3); } .puente__right{ width: 3vw; height: .4vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-3vw) translateY(-.4vw); background-color: var(--pine2); } .puente__left{ width: 3vw; height: .4vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-.4vw); background-color: var(--pine1); } .puente__top{ width: 6vw; height: 3vw; transform-origin: top left; transform: translateZ(.4vw) ; background-color: var(--pine2); } .puente_bottom{ width: 6vw; height: 3vw; transform-origin: top left; transform: rotateY(180deg) translateX(-6vw); background-color: var(--pine3); } /* ----- */ .casa{ width: 6vw; height: 3vw; left: 3vw; top: 5vw; transform: translateZ(1.51vw); } .casa::before{ content: ''; position: absolute; width: 150%; height: 250%; left: -25%; bottom: -50%; background-image: radial-gradient(var(--pine3) 10%, transparent 85%, transparent); border-radius: 2vw; } .casa::after{ content: ''; position: absolute; top: .75vw; right: -3vw; width: 3vw; height: 1.5vw; opacity: .85; background-image: radial-gradient(circle at 15% 15%, var(--pine0) .2vw ,transparent .2vw), radial-gradient(circle at 35% 20%, var(--pine0) .19vw ,transparent .19vw), radial-gradient(circle at 20% 60%, var(--pine0) .19vw ,transparent .19vw), radial-gradient(circle at 40% 70%, var(--pine0) .21vw ,transparent .21vw), radial-gradient(circle at 55% 30%, var(--pine0) .18vw ,transparent .18vw), radial-gradient(circle at 70% 20%, var(--pine0) .22vw ,transparent .22vw), radial-gradient(circle at 65% 70%, var(--pine0) .2vw ,transparent .2vw) ; } .casa__front{ width: 6vw; height: 3vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(0vw); background-color: var(--pine3); border-bottom: .5vw solid var(--pine0); } .casa__front::before{ content: ''; position: absolute; width: 1.25vw; height: 1.25vw; background-color: var(--pine1); top: .8vw; left: 1.05vw; border: .115vw solid var(--pine0); } .casa__front::after{ content: ''; position: absolute; width: 1.25vw; height: 1.25vw; background-color: var(--pine1); top: .8vw; right: 1.05vw; border: .115vw solid var(--pine0); } .casa__back{ width: 6vw; height: 3vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-3vw) ; background-color: var(--pine3); } .casa__right{ width: 3vw; height: 3vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-3vw) translateY(-3vw); background-color: var(--pine0); } .casa__right::before{ content: ''; position: absolute; width: 1.125vw; height: 2vw; background-color: var(--pine1); bottom: 0; left: 1vw; border: .1vw solid var(--pine0); } .casa__left{ width: 3vw; height: 3vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw); background-color: var(--pine1); } .casa__top{ width: 7vw; height: 4vw; bottom: -.5vw; left: -.5vw; transform-origin: top left; transform: translateZ(3.01vw) ; background-color: var(--pine0); } .casa__bottom{ width: 6vw; height: 3vw; transform-origin: top left; transform: rotateY(180deg) translateX(-6vw); background-color: var(--pine3); } /* ----- */ .chimenea{ width: 1vw; height: 1vw; left: 3vw; top: 5vw; transform: translateZ(4.25vw); } .chimenea__front{ width: 1vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(0vw); background-color: var(--pine3); } .chimenea__back{ width: 1vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-1vw) ; background-color: var(--pine3); } .chimenea__right{ width: 1vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-1vw) translateY(-1vw); background-color: var(--pine0); } .chimenea__left{ width: 1vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); background-color: var(--pine1); } .chimenea__top{ width: 1vw; height: 1vw; transform-origin: top left; transform: translateZ(1vw) ; background-color: var(--pine1); border: .2vw solid var(--pine3); } .chimenea__bottom{ width: 1vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-1vw); background-color: var(--pine3); } /* ----- */ .pared{ top: 0; left: 0; width: 100%; height: 2vw; transform: translateZ(1.51vw); } .pared-a{ bottom: 0; width: 4vw; height: 2vw; } .pared-a__front{ width: 4vw; height: 18vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-16vw); background-color: var(--bp0); background-image: linear-gradient(to bottom, var(--bp0) 60%, var(--bp2), var(--bp3) ); } .pared-a__back{ width: 4vw; height: 18vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-18vw) ; background-color: var(--bp3); } .pared-a__right{ width: 2vw; height: 18vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-18vw); background-color: var(--bp3); } .pared-a__left{ width: 2vw; height: 18vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-18vw); background-color: var(--bp1); } .pared-a__top{ width: 4vw; height: 2vw; transform-origin: top left; transform: translateZ(18vw) ; background-color: var(--bp2); } .pared-a__bottom{ width: 4vw; height: 2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); background-color: var(--bp3); } /* ----- */ .pared-b{ left: 4vw; bottom: -1vw; width: 4vw; height: 3vw; } .pared-b__front{ width: 4vw; height: 19vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-16vw); background-color: var(--bp1); background-image: linear-gradient(to bottom, var(--bp0) 60%, var(--bp2), var(--bp3) ); } .pared-b__back{ width: 4vw; height: 19vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-19vw) ; background-color: var(--bp3); } .pared-b__right{ width: 3vw; height: 19vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-3vw) translateY(-19vw); background-color: var(--bp3); } .pared-b__left{ width: 3vw; height: 19vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-19vw); background-color: var(--bp1); } .pared-b__top{ width: 4vw; height: 3vw; transform-origin: top left; transform: translateZ(19vw) ; background-color: var(--bp2); } .pared-b__bottom{ width: 4vw; height: 3vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); background-color: var(--bp3); } /* ----- */ .pared-c{ left: 8vw; bottom: 0; width: 5vw; height: 2vw; } .pared-c__front{ width: 5vw; height: 17vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-15vw); background-color: var(--bp0); background-image: linear-gradient(to bottom, var(--bp0) 60%, var(--bp2), var(--bp3) ); } .pared-c__back{ width: 5vw; height: 17vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-5vw) translateY(-17vw) ; background-color: var(--bp3); } .pared-c__right{ width: 2vw; height: 17vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vw) translateX(-2vw) translateY(-17vw); background-color: var(--bp3); } .pared-c__left{ width: 2vw; height: 17vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-17vw); background-color: var(--bp1); } .pared-c__top{ width: 5vw; height: 2vw; transform-origin: top left; transform: translateZ(17vw) ; background-color: var(--bp2); } .pared-c__bottom{ width: 5vw; height: 2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-5vw); background-color: var(--bp3); } /* ----- */ .pared-d{ left: 17vw; } .pared-e{ left: 22vw; } .pared-f{ left: 26vw; } /* ----- */ .cascada{ left: 13vw; width: 4vw; height: 2vw; transform: translateZ(-.5vw); } .cascada__front{ width: 4vw; height: 17vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-15.5vw); border-left: .75vw solid var(--waterb); border-right: .75vw solid var(--waterb); background-color: var(--water2); } .cascada__front::before{ content: ''; position: absolute; width: 100%; height: 3vw; top: 0; opacity: .5; background-image: linear-gradient(to bottom, transparent, var(--water0), transparent); animation: agua 2s infinite ; } .cascada__back{ width: 4vw; height: 17vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-17vw) ; background-color: var(--water3); } .cascada__right{ width: 1.5vw; height: 17vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-1.5vw) translateY(-17vw); background-color: var(--water2); } .cascada__left{ width: 1.5vw; height: 17vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-17vw); background-color: var(--water1); } .cascada__top{ width: 4vw; height: 1.8vw; transform-origin: top left; transform: translateZ(17vw) ; background-color: var(--water2); border-left: .75vw solid var(--waterb); border-right: .75vw solid var(--waterb); } .cascada_bottom{ width: 4vw; height: 1.8vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); background-color: var(--water3); } /* ----- */ .pinos{ bottom: 0; width: 13vw; height: 7.5vw; transform: translateZ(1.51vw); } .pinos:nth-of-type(1){ bottom: 0; left: 0vw;} .pinos:nth-of-type(2){ bottom: 9vw; } .pinos:nth-of-type(3){ bottom: 0; left: 17vw;} .pinos:nth-of-type(4){ bottom: 9vw; left: 17vw; } .pinos-w{ position: absolute; width: 30vw; height: 10vw; bottom: 18vw; transform: translateZ(1.51vw); } .pinos-w .pino:nth-of-type(1){ right: 2%; top: 5%; } .pinos-w .pino:nth-of-type(2){ right: 10%; top: 5%; } .pinos-w .pino:nth-of-type(3){ right: 18%; top: 5%; } .pinos-w .pino:nth-of-type(4){ right: 26%; top: 5%; } .pinos-w .pino:nth-of-type(5){ right: 34%; top: 5%; } .pinos-w .pino:nth-of-type(6){ right: 65%; top: 10%; } .pinos-w .pino:nth-of-type(7){ right: 65%; top: 70%; } .pino{ bottom: 0; width: 1.4vw; height: 1.4vw; transform: rotateZ(-10deg) scale(.7); } .pino::before{ content: ''; position: absolute; bottom: 0; left: 0; width: 200%; height: 150%; border-radius: 50%; background-image: radial-gradient(circle, var(--pine3) , transparent 80%, transparent); opacity: .5; } .pino-ta{ transform: rotateZ(-50deg) scaleX(.8) scaleY(.8) scaleZ(.8); } .pino-tb{ transform: rotateZ(-60deg) scaleX(.8) scaleY(.9) scaleZ(1); } .pino-tc{ transform: rotateZ(-10deg) scaleX(.6) scaleY(.5) scaleZ(1.2); } .pino-td .pino-ta{ transform: rotateZ(45deg) scaleX(.8) scaleY(.8) scaleZ(.9); } .pino-td .pino-tb{ transform: rotateZ(45deg) scaleX(.7) scaleY(.7) scaleZ(.6) translateZ(1.4vw); left: .1vw; top: -.1vw;} .pino-td .pino-tb::before{ content: none;} .pino-te{ transform: rotateZ(10deg) scaleX(.45) scaleY(.5) scaleZ(.7); } .pino-tf .pino-ta{ transform: rotateZ(-50deg) scaleX(.8) scaleY(.8) scaleZ(.9); } .pino-tf .pino-tb{ transform: rotateZ(-50deg) scaleX(.7) scaleY(.7) scaleZ(.6) translateZ(1.4vw); left: .1vw; top: -.1vw; } .pino-tf .pino-tb::before{ content: none;} .pino:nth-of-type(1){ right: 2%; bottom: 5%; } .pino:nth-of-type(2){ right: 4%; bottom: 35%; } .pino:nth-of-type(3){ right: 2%; bottom: 55%; } .pino:nth-of-type(4){ right: 1%; bottom: 75%; } .pino:nth-of-type(5){ right: 3%; bottom: 100%; } .pino:nth-of-type(6){ right: 18%; bottom: 10%; } .pino:nth-of-type(7){ right: 15%; bottom: 30%; } .pino:nth-of-type(8){ right: 20%; bottom: 55%; } .pino:nth-of-type(9){ right: 20%; bottom: 70%; } .pino:nth-of-type(10){ right: 22%; bottom: 95%; } .pino:nth-of-type(11){ right: 34%; bottom: 8%; } .pino:nth-of-type(12){ right: 35%; bottom: 28%; } .pino:nth-of-type(13){ right: 36%; bottom: 52%; } .pino:nth-of-type(14){ right: 38%; bottom: 74%; } .pino:nth-of-type(15){ right: 40%; bottom: 100%; } .pino:nth-of-type(16){ right: 50%; bottom: 4%; } .pino:nth-of-type(17){ right: 52%; bottom: 28%; } .pino:nth-of-type(18){ right: 55%; bottom: 55%; } .pino:nth-of-type(19){ right: 54%; bottom: 75%; } .pino:nth-of-type(20){ right: 55%; bottom: 100%; } .pino:nth-of-type(21){ right: 65%; bottom: 5%; } .pino:nth-of-type(22){ right: 67%; bottom: 32%; } .pino:nth-of-type(23){ right: 68%; bottom: 60%; } .pino:nth-of-type(24){ right: 64%; bottom: 75%; } .pino:nth-of-type(25){ right: 69%; bottom: 100%; } .pino:nth-of-type(26){ right: 80%; bottom: 5%; } .pino:nth-of-type(27){ right: 82%; bottom: 32%; } .pino:nth-of-type(28){ right: 85%; bottom: 60%; } .pino:nth-of-type(29){ right: 82%; bottom: 75%; } .pino:nth-of-type(30){ right: 88%; bottom: 100%; } .pino-c{ width: 100%; height: 100%; } .pino-c:nth-last-of-type(2){ transform: rotateZ(90deg);} .pino-c:nth-last-of-type(3){ transform: rotateZ(180deg);} .pino-c:nth-last-of-type(4){ transform: rotateZ(270deg);} .pino__front{ border-top: 2.5vw solid var(--pine2); border-left: .73vw solid transparent; border-right: .73vw solid transparent; border-bottom: .73vw solid transparent; transform-origin: top left; transform: rotateX(70deg); } .pino-c:nth-last-of-type(2) .pino__front{ border-top: 2vw solid var(--pine3); } .pino-c:nth-last-of-type(4) .pino__front{ border-top: 2vw solid var(--pine1); } .humo{ position: relative; width: .5vw; height: .5vw; left: .2vw; background-color: var(--pine1); transform: rotateY(90deg) rotateX(90deg) translateX(-.25vw); border-radius: 50%; opacity: 0; } .humo:nth-of-type(1){ animation: humo 2s infinite linear ; } .humo:nth-of-type(2){ animation: humo 2s infinite linear .4s; } .humo:nth-of-type(3){ animation: humo 2s infinite linear .8; } .humo:nth-of-type(4){ animation: humo 2s infinite linear 1.2s; } /***********************/ @keyframes humo { 0%{ opacity: .1; width: .15vw; height: .15vw; transform: rotateY(90deg) rotateX(90deg) translateX(-.25vw); } 50%{ opacity: .7; width: .4vw; height: .4vw; transform: rotateY(90deg) rotateX(90deg) translateX(-.75vw); } 90%{ opacity: .2; width: .2vw; height: .2vw; transform: rotateY(90deg) rotateX(90deg) translateX(-2.25vw); } 100%{ opacity: 0; width: .2vw; height: .2vw; transform: rotateY(90deg) rotateX(90deg) translateX(-2.5vw); } } /* @keyframes agua { to{ top: 90%;} } */ </style> </head> <body translate="no"> <div class="main"> <h1 class="text">FOREST</h1> <div class="montaña"> <div class="base-b"> <div class="suelo face"> <div class="suelo__front face"></div> <div class="suelo__back face"></div> <div class="suelo__right face"></div> <div class="suelo__left face"></div> <div class="suelo__top face"></div> <div class="suelo__bottom face"></div> </div> <div class="suelo face"> <div class="suelo__front face"></div> <div class="suelo__back face"></div> <div class="suelo__right face"></div> <div class="suelo__left face"></div> <div class="suelo__top face"></div> <div class="suelo__bottom face"></div> </div> <div class="agua face"> <div class="agua__front face"></div> <div class="agua__back face"></div> <div class="agua__right face"></div> <div class="agua__left face"></div> <div class="agua__top face"></div> <div class="agua__bottom face"></div> </div> <div class="camino face"></div> <div class="puente face"> <div class="puente__front face"></div> <div class="puente__back face"></div> <div class="puente__right face"></div> <div class="puente__left face"></div> <div class="puente__top face"></div> <div class="puente__bottom face"></div> </div> <div class="casa face"> <div class="casa__front face"></div> <div class="casa__back face"></div> <div class="casa__right face"></div> <div class="casa__left face"></div> <div class="casa__top face"></div> <div class="casa__bottom face"></div> </div> <div class="chimenea face"> <div class="chimenea__front face"></div> <div class="chimenea__back face"></div> <div class="chimenea__right face"></div> <div class="chimenea__left face"></div> <div class="chimenea__top face"> <div class="humo"></div> <div class="humo"></div> <div class="humo"></div> <div class="humo"></div> </div> <div class="chimenea__bottom face"></div> </div> </div> <div class="pared face"> <div class="pared-b pared-s face"> <div class="pared-a__front face"></div> <div class="pared-a__back face"></div> <div class="pared-a__right face"></div> <div class="pared-a__left face"></div> <div class="pared-a__top face"> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> </div> <div class="pared-a__bottom face"></div> </div> <div class="pared-a pared-s face"> <div class="pared-b__front face"></div> <div class="pared-b__back face"></div> <div class="pared-b__right face"></div> <div class="pared-b__left face"></div> <div class="pared-b__top face"> <div class="pino pino-tf face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> </div> <div class="pared-b__bottom face"></div> </div> <div class="pared-c pared-s face"> <div class="pared-c__front face"></div> <div class="pared-c__back face"></div> <div class="pared-c__right face"></div> <div class="pared-c__left face"></div> <div class="pared-c__top face"> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> </div> <div class="pared-c__bottom face"></div> </div> <div class="pared-c pared-s pared-d face"> <div class="pared-c__front face"></div> <div class="pared-c__back face"></div> <div class="pared-c__right face"></div> <div class="pared-c__left face"></div> <div class="pared-c__top face"></div> <div class="pared-c__bottom face"></div> </div> <div class="pared-a pared-s pared-f face"> <div class="pared-a__front face"></div> <div class="pared-a__back face"></div> <div class="pared-a__right face"></div> <div class="pared-a__left face"></div> <div class="pared-a__top face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pared-a__bottom face"></div> </div> <div class="pared-a pared-s pared-e face"> <div class="pared-a__front face"></div> <div class="pared-a__back face"></div> <div class="pared-a__right face"></div> <div class="pared-a__left face"></div> <div class="pared-a__top face"> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pared-a__bottom face"></div> </div> <div class="cascada face"> <div class="cascada__front face"></div> <div class="cascada__back face"></div> <div class="cascada__right face"></div> <div class="cascada__left face"></div> <div class="cascada__top face"></div> <div class="cascada__bottom face"></div> </div> </div> <div class="bosque"> <div class="pinos face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tf face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-tf face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-tf face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pinos face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-td face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-te face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tf face"> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tb face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> </div> <div class="pino pino-ta face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> </div> <div class="pino pino-tc face"> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div></div> <div class="pino-c face"><div class="pino__front face"></div><.........完整代码请登录后点击上方下载按钮下载查看
网友评论0