Aurora (Only CSS)

HTML
<div class="contenedor"> <div class="luna"></div> <div class="stars"></div> <div class="stars3"></div> <div class="stars5"></div> <div class="circu"></div> <div class="base"></div> <ul class="mont"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="hills"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="arboles"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
CSS
body{ background:black; } .contenedor{ position:relative; width: 500px; height:500px; border-radius:100%; background: #f76009; background: -moz-linear-gradient(left, #f76009 7%, #04b6d6 33%, #ff0f43 65%, #408c54 93%); background: -webkit-gradient(linear, left top, right top, color-stop(7%,#f76009), color-stop(33%,#04b6d6), color-stop(65%,#ff0f43), color-stop(93%,#408c54)); background: -webkit-linear-gradient(left, #f76009 7%,#04b6d6 33%,#ff0f43 65%,#408c54 93%); background: -o-linear-gradient(left, #f76009 7%,#04b6d6 33%,#ff0f43 65%,#408c54 93%); background: -ms-linear-gradient(left, #f76009 7%,#04b6d6 33%,#ff0f43 65%,#408c54 93%); background: linear-gradient(to right, #f76009 7%,#04b6d6 33%,#ff0f43 65%,#408c54 93%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f76009', endColorstr='#408c54',GradientType=1 ); margin:192px auto; border:9px solid #210432; } .circu{ position:relative; width: 500px; height:500px; border-radius:100%; background: -moz-linear-gradient(left, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.16) 25%, rgba(252,252,252,0.21) 50%, rgba(255,255,255,0.26) 75%, rgba(255,255,255,0.3) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.12)), color-stop(25%,rgba(255,255,255,0.16)), color-stop(50%,rgba(252,252,252,0.21)), color-stop(75%,rgba(255,255,255,0.26)), color-stop(100%,rgba(255,255,255,0.3))); background: -webkit-linear-gradient(left, rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.16) 25%,rgba(252,252,252,0.21) 50%,rgba(255,255,255,0.26) 75%,rgba(255,255,255,0.3) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.16) 25%,rgba(252,252,252,0.21) 50%,rgba(255,255,255,0.26) 75%,rgba(255,255,255,0.3) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.16) 25%,rgba(252,252,252,0.21) 50%,rgba(255,255,255,0.26) 75%,rgba(255,255,255,0.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.16) 25%,rgba(252,252,252,0.21) 50%,rgba(255,255,255,0.26) 75%,rgba(255,255,255,0.3) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fffffff', endColorstr='#4dffffff',GradientType=1 ); margin:0px auto; animation: girar .7s linear infinite; -moz-animation: girar .7s linear infinite; -webkit-animation: girar .7s linear infinite; } .base{ position:relative; width: 500px; height:250px; border-radius:0 0 500px 500px; background:#26152D; margin:-250px auto;} .luna{ position:absolute; width:112px; height:112px; border-radius:100%; background:white; margin: 30px 192px; box-shadow:0 0 90px #FFf; -moz-box-shadow:0 0 90px #FFf; -ms-box-shadow:0 0 90px #FFf; -o-box-shadow:0 0 90px #FFf; -webkit-box-shadow:0 0 90px #FFf; } .stars{ position:absolute; width:5px; height:5px; border-radius:100%; background:white; margin:90px 90px; } .stars::before{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:30px 50px; } .stars::after{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:30px 112px; } .stars3{ position:absolute; width:5px; height:5px; border-radius:100%; background:white; margin:90px 393px; } .stars3::before{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:30px -50px; } .stars3::after{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:30px -112px; } .stars5{ position:absolute; width:5px; height:5px; border-radius:100%; background:white; margin:152px 390px; } .stars5::before{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:0px -300px; } .stars5::after{ content:""; display:block; width:5px; height:5px; border-radius:100%; background:white; margin:-142px -142px; } ul.mont{ position:relative; width:450px; height:172px; margin:-340px -5px; list-style:none; } ul.mont li{ display:inline-block; position:relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 121px solid black; margin:-9px; } ul.mont li:nth-child(1){ width: 0; height: 0; border-left: 70px solid transparent; border-right:70px solid transparent; border-bottom: 121px solid black; } ul.mont li:nth-child(2){ width: 0; height: 0; border-left: 60px solid transparent; border-right:60px solid transparent; border-bottom: 112px solid black; margin-left:-40px } ul.mont li:nth-child(3){ width: 0; height: 0; border-left: 70px solid transparent; border-right:70px solid transparent; border-bottom: 132px solid black; margin-left:-60px; } ul.mont li:nth-child(4){ margin-left:-45px } ul.mont li:nth-child(5){ width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 112px solid black; margin-left:-30px; } ul.hills{ position:relative; width:450px; height:172px; margin:-231px -40px; list-style:none; } ul.hills li{ display:inline-block; position:absolute; width:132px; height:60px; border-radius:192px 192px 0 0; background:black; margin:216px 3px } ul.hills li:nth-child(1){ width:132px; height:60px; border-radius:192px 192px 0 0; background:#190021; margin:231px 3px; } ul.hills li:nth-child(2) { width:90px; height:45px; border-radius:90px 90x 0 0; background:#190021; margin: 246px 112px; } ul.hills li:nth-child(3){ width:112px; height:55px; border-radius:192px 192px 0 0; background:#190021; margin: 236px 192px } ul.hills li:nth-child(4) { width:90px; height:45px; border-radius:90px 90x 0 0; background:#190021; margin: 246px 281px; } ul.hills li:nth-child(5){ width:132px; height:60px; border-radius:192px 192px 0 0; background:#190021; margin:231px 363px } ul.arboles{ position:relative; width:512px; height:172px; margin:353px -50px; list-style:none; } ul.arboles li{ display:inline-block; width:9px; height:50px; background:black; } ul.arboles li::before{ content:""; position:absolute; width: 0; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 50px solid #002318; margin:-21px -16px; } ul.arboles li:nth-child(1){ margin: 25px 63px; } ul.arboles li:nth-child(2){ margin:12px 25px } ul.arboles li:nth-child(3){ margin: 0 50px; } ul.arboles li:nth-child(4){ margin:12px 25px; } ul.arboles li:nth-child(5){ margin:25px 60px; } @keyframes girar {0% {-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}} @-webkit-keyframes girar {0% {-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}} @-moz-keyframes girar {0% {-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}}
JAVASCRIPT
Expand for more options Login