CSS
body{
background:#012032;
}
.contenedor{
width:100%;
height:1000px;
position:relative;
margin:0 auto;
overflow:hidden;
}
ul.mountains{
display:block;
width: 100%;
height: 580px;
list-style:none;
margin-left:0px
}
ul.mountains li{
display:inline-block;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 300px solid #08182f;
margin-left:3px;
}
ul.mountains li:nth-child(1){
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #08182f;
}
ul.mountains li:nth-child(2) {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-bottom: 350px solid #08182f; }
ul.mountains li:nth-child(4) {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #08182f; }
ul.mountains li:nth-child(5) {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-bottom: 350px solid #08182f; }
ul.mountains3{
margin-top:-665px;
display:block;
width: 100%;
height: 600px;
list-style:none;
margin-left:50px;
}
ul.mountains3 li{
display:inline-block;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 400px solid green;
margin-left:0;
}
ul.mountains3 li:nth-child(1){
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 400px solid #03564a;
}
ul.mountains3 li:nth-child(2) {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 150px solid #03564a; }
ul.mountains3 li:nth-child(3) {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-bottom: 350px solid #03564a; }
ul.mountains3 li:nth-child(4) {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #03564a; }
ul.mountains3 li:nth-child(5) {
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-bottom: 350px solid #03564a; }
ul.mountains3 li:nth-child(6) {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #03564a; }
ul.mountains6{
margin-top:-565px;
display:block;
width: 90%;
height: 600px;
list-style:none;
margin-left:219px;
}
ul.mountains6 li{
display:inline-block;
width: 0;
height: 0;
border-bottom: 50px solid black;
border-right: 100px solid transparent;
}
ul.mountains6 li:nth-child(1){
width: 0;
height: 0;
border-right: 200px solid transparent;
border-bottom: 396px solid #01332f;
margin: -47px 33px;
}
ul.mountains6 li:nth-child(1)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 60px solid white;
border-left: 32px solid transparent;
margin: -4px -32px;
}
ul.mountains6 li:nth-child(1)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 60px solid gray;
border-right: 30px solid transparent;
margin: -60px -1px;
}
ul.mountains6 li:nth-child(2) {
width: 0;
height: 0;
border-right: 73px solid transparent;
border-bottom: 146px solid #01332f;
margin: -47px 42px;}
ul.mountains6 li:nth-child(2)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid white;
border-left: 23px solid transparent;
margin: -4px -23px;
}
ul.mountains6 li:nth-child(2)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid gray;
border-right: 21px solid transparent;
margin: -45px 0px;
}
ul.mountains6 li:nth-child(3) {
width: 0;
height: 0;
border-right: 173px solid transparent;
border-bottom: 347px solid #01332f;
margin: -47px 135px;}
ul.mountains6 li:nth-child(3)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid white;
border-left: 23px solid transparent;
margin: -4px -23px;
}
ul.mountains6 li:nth-child(3)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid gray;
border-right: 21px solid transparent;
margin: -45px 0px;
}
ul.mountains6 li:nth-child(4) {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 102px solid #01332f;
margin: -47px -85px;}
ul.mountains6 li:nth-child(4)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 33px solid white;
border-left: 14px solid transparent;
margin: 0px -14px;
}
ul.mountains6 li:nth-child(4)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 35px solid gray;
border-right: 16px solid transparent;
margin: -35px 0px;
}
ul.mountains6 li:nth-child(5) {
width: 0;
height: 0;
border-right: 174px solid transparent;
border-bottom: 349px solid #01332f;
margin: -47px 261px; }
ul.mountains6 li:nth-child(5)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 56px solid white;
border-left: 28px solid transparent;
margin: 0px -28px;
}
ul.mountains6 li:nth-child(5)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 59px solid gray;
border-right: 29px solid transparent;
margin: -59px 0px;
}
ul.mountains6 li:nth-child(6) {
width: 0;
height: 0;
border-right: 99px solid transparent;
border-bottom:195px solid #01332f;
margin: -47px -159px;
}
ul.mountains6 li:nth-child(6)::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid white;
border-left: 23px solid transparent;
margin: -4px -23px;
}
ul.mountains6 li:nth-child(6)::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 45px solid gray;
border-right: 21px solid transparent;
margin: -45px 0px;
}
.flat{
position:absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #01332f;
border-bottom: 50px solid transparent;
margin: -498px 234px;
}
.flat::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 50px solid transparent;
border-bottom: 165px solid #01332f;
margin: 17px -33px;
}
.flat::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 73px solid #03564a;
border-right: 35px solid transparent;
margin: -355px 58px;
}
.flat3{
position:absolute;
width: 0;
height: 0;
border-top: 33px solid #01332f;
border-left: 35px solid transparent;
margin: -325px 542px;
}
.flat3::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 142px solid transparent;
border-right: 50px solid transparent;
border-bottom: 182px solid #01332f;
margin: -157px 163px;}
.flat3::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 30px solid #03564a;
border-right: 47px solid transparent;
margin: 127px 475px;
}
.flat6{
position:absolute;
width: 0;
height: 0;
border-top: 190px solid transparent;
border-left: 137px solid #03564a;
border-bottom: 50px solid transparent;
margin: -526px 1235px;
}
.flat6::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 35px solid transparent;
border-bottom: 58px solid #03564a;
margin: -60px 172px;
}
.flat6::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 73px solid #03564a;
border-right: 93px solid transparent;
margin: 58px 185px;
}
.hills{
position:relative;
width:100%;
height:21px;
border-radius: 150px 150px 0 0;
-moz-border-radius: 150px 150px 0 0;
background:#002112;
margin: -287px 0px;
}
.lake{
position:relative;
display:block;
width:100%;
height:328px;
background:#012a46;
margin: 290px 0px;
border-top:1px solid #01365e;
}
.luna{
position:relative;
display:block;
width:121px;
height:121px;
border-radius:100%;
-moz-border-radius:100%;
background:white;
margin: -1201px 50px;
}
.ani {
-webkit-animation:sail 60s ease-in-out infinite ;
-moz-animation:sail 60s ease-in-out infinite ;
animation:sail 60s ease-in-out infinite ;
position:relative;
}
.barco{
position:absolute;
border-top: 30px solid #cc6633;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
height: 0;
width: 43px;
margin: 121px 300px;
-webkit-animation:flotar 3s alternate infinite ;
-webkit-transition-timing-function: cubic-bezier(0,.5,.99,.54);
-moz-animation:flotar 3s alternate infinite;
-moz-transition-timing-function: cubic-bezier(0,.5,.99,.54);
}
.barco::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 70px solid gray;
border-right: 50px solid transparent;
margin: -102px 26px;
}
.barco::after{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 70px solid white;
border-left: 50px solid transparent;
margin: 30px -29px;
}
.base{
position:absolute;
display:block;
width:201px;
height:40px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin: 118px -60px;
transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);
-webkit-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);
-moz-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);
-o-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);
-ms-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);
}
@-webkit-keyframes flotar{
from {-webkit-transform:rotate(3deg);}
to {-webkit-transform:rotate(-3deg);}
}
@-moz-keyframes flotar {
from {-moz-transform:rotate(3deg);}
to {-moz-transform:rotate(-3deg);}
}
@keyframes flotar{
from {-webkit-transform:rotate(3deg);}
to {-webkit-transform:rotate(-3deg);}
}
@-webkit-keyframes sail{
0% {left:-25%;}
25% {left: 0%;}
35% {left: 12%;}
45% {left: 21%;}
50% {left: 30%;}
55% {left: 35%;}
65% {left: 50%;}
75% {left: 80%;}
85% {left: 85%;}
90% {left: 90%;}
100% {left:100%;}
}
@-moz-keyframes sail {
0% {left:-25%;}
25% {left: 0%;}
35% {left: 12%;}
45% {left: 21%;}
50% {left: 30%;}
55% {left: 35%;}
65% {left: 50%;}
75% {left: 80%;}
85% {left: 85%;}
90% {left: 90%;}
100% {left:100%;}
}
@keyframes sail {
0% {left:-25%;}
25% {left: 0%;}
35% {left: 12%;}
45% {left: 21%;}
50% {left: 30%;}
55% {left: 35%;}
65% {left: 50%;}
75% {left: 80%;}
85% {left: 85%;}
90% {left: 90%;}
100% {left:100%;}
}
ul.estrellas{
width:90%;
height:300px;
list-style:none;
text-decoration:none;
text-align:center;
position:relative;
display:block;
margin: 56px auto;
}
ul.estrellas li{
width:3px;
height:3px;
moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
background:white;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
}
ul.estrellas li:nth-child(1) {
margin: 80px 321px;
animation:brillo 5s alternate infinite;
-moz-animation:brillo 5s alternate infinite ;
-webkit-animation:brillo 5s alternate infinite;
-o-animation:brillo 5s alternate infinite;
}
ul.estrellas li:nth-child(2){
margin:12px 464px;
}
ul.estrellas li:nth-child(3){
margin: 59px 182px;
animation:brillo 5s alternate infinite;
-moz-animation:brillo 5s alternate infinite ;
-webkit-animation:brillo 5s alternate infinite;
-o-animation:brillo 5s alternate infinite;
}
ul.estrellas li:nth-child(4){
margin: 132px 564px;
}
ul.estrellas li:nth-child(5) {
margin: -261px 718px;
animation:brillo 5s alternate infinite;
-moz-animation:brillo 5s alternate infinite ;
-webkit-animation:brillo 5s alternate infinite;
-o-animation:brillo 5s alternate infinite;
}
ul.estrellas li:nth-child(6) {
margin:102px 1257px;
}
ul.estrellas li:nth-child(7) {
margin:25px 1169px;
}
ul.estrellas li:nth-child(8) {
margin:167px 888px;
}
ul.estrellas li:nth-child(9) {
margin:-303px 1432px;
}
ul.estrellas li:nth-child(4), ul.estrellas li:nth-child(9),ul.estrellas li:nth-child(8) {
width:5px;
height:5px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
animation:brillo 3s alternate infinite;
-moz-animation:brillo 3s alternate infinite ;
-webkit-animation:brillo 3s alternate infinite;
-o-animation:brillo 3s alternate infinite;
}
@-webkit-keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.7); }
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
}
@-moz-keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.7); }
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
}
@-ms-keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.7);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.7); }
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-moz-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-ms-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-o-box-shadow:0 0 3px 3px rgba(255,255,255,.3);
-webkit-box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
}
.fugaz{
position:absolute;
top:-205px;
left:400px;
width:200px;
height:200px;
opacity:0.8;
-webkit-animation: stars 9s ease-in infinite ;
-moz-animation: stars 9s ease-in infinite ;
-ms-animation: stars 9s ease-in infinite ;
-o-animation: stars 9s ease-in infinite ;
animation: stars 9s ease-in infinite ;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-ms-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}
.estrella3{
width:10px;
height:10px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background:#FFF;
-webkit-box-shadow:0px 0px 7px 2px #FFF;
-moz-box-shadow:0px 0px 7px 2px #FFF;
box-shadow:0px 0px 7px 2px #FFF;
position: absolute;
bottom:0;
right:0;
}
.estrella5{
height:0;
border-left: 3px solid transparent;
border-bottom: 200px solid #FFF;
border-right: 3px solid transparent;
position: absolute;
bottom:-22px;
right:75px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
@keyframes stars {
0% {
top: -200px;
left: 400px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
10% {
top: 400px;
left: 980px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}
@-moz-keyframes stars {
0% {
top: -200px;
left: 400px;
filter: alpha(opacity=80);
opacity: 0.8;
}
10% {
top: 300px;
left: 980px;
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-webkit-keyframes stars{
0% {
top: -200px;
left: 400px;
filter: alpha(opacity=80);
opacity: 0.8;
}
10% {
top: 300px;
left: 980px;
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-ms-keyframes stars {
0% {
top: -200px;
left: 400px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
10% {
top: 300px;
left: 980px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}
@-o-keyframes stars {
0% {
top: -200px;
left: 400px;
filter: alpha(opacity=80);
opacity: 0.8;
}
10% {
top: 300px;
left: 980px;
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
