Fla

HTML
<body> <div class="contenedor"> <ul class="estrellas"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="mountains"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="mountains3"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="mountains6"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="flat"></div> <div class="flat3"></div> <div class="flat6"></div> <div class="hills"></div> <div class="lake"><div class="ani"><div class="barco"><div class="base"></div></div></div></div> <div class="luna"></div> <div class="fugaz"> <div class="estrella3"></div> <div class="estrella5"></div> </div> </div> </body>
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; } }
JAVASCRIPT
Expand for more options Login