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