Looking to the Sky .... (Only CSS)

HTML
<div class="contenedor"> <div class="luna"></div> <ul> <li><div class="star"><div class="star-top"></div><div class="star-bottom"></div></div></li> <li><div class="star"><div class="star-top"></div><div class="star-bottom"></div></div></li> <li><div class="star"><div class="star-top"></div><div class="star-bottom"></div></div></li> <div class="dibujo"> <div class="botas"></div> <div class="body"></div> <div class="body3"></div> <div class="brazos"><div class="brazos3"></div></div> <div class="hair"> <span class="h1"></span> <span class="h2"></span> <span class="h3"></span> <span class="h4"></span> <span class="h5"></span> <span class="h6"></span> <span class="h7"></span> <span class="h8"></span> <span class="h9"></span> <span class="h12"></span> <span class="h14"></span> <span class="h16"></span> <span class="h17"></span> <span class="h19"></span> <span class="h21"></span> <span class="h30"></span> </div> <div class="head"></div> </div> </div>
CSS
body{ background:black; } .contenedor{ position:relative; width:500pX; height:500px; margin:231px auto; border-radius:100%; background:#001326; border:3px solid #003947; } .contenedor::before{ content:""; position:absolute; width:500px; height:250px; border-radius: 0 0 250px 250px; background:#000C21; margin:250px 0; } .luna{ position:absolute; width:172px; height:85px; border-radius:172px 172px 0 0; background:#ccc; margin: 162px 165px } ul{ position:absolute; width:100%; height:300px; margin:-251px -90px; list-style:none; } ul li{ display:inline-block; width:50px; height:50px; } .star { display: block; position: absolute; margin:30px 90px; width: 30px; height: 30px; background: #F6F6F6; overflow: hidden; z-index: 2; animation: glitter 4.5s linear 0s infinite normal; -webkit-animation: glitter 4.5s linear 0s infinite normal; -moz-animation: glitter 4.5s linear 0s infinite normal; -ms-animation: glitter 4.5s linear 0s infinite normal; -o-animation: glitter 4.5s linear 0s infinite normal; } .star-top,.star-bottom{ position: relative; display: block; } .star-top:before , .star-top:after , .star-bottom:before , .star-bottom:after{ content: ""; width: 30px; height: 30px; background:#001326; border-radius: 50%; position: absolute; } .star-top:before { top: -16px; left: -16px; } .star-top:after { bottom: -14px; left: 16px; } .star-bottom:before { top: 16px; left: -16px; } .star-bottom:after { top: 16px; left: 16px; } ul li:nth-child(1){ margin:121px 30px; } ul li:nth-child(2){ margin: 231px 80px; } ul li:nth-child(3){ margin:121px 30px; } .hair{ position:absolute; margin:30px 300px; transform:rotate(70deg); -moz-transform:rotate(70deg); -webkit-transform:rotate(70deg); } .h1{ position:absolute; width:112px; height:90px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu 1s alternate infinite; -moz-animation:ondu 1s alternate infinite; -webkit-animation:ondu 1s alternate infinite; margin:-12px 12px; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); } .h2{ position:absolute; width:132px; height:121px; border-radius:100%; border-bottom:3px solid #ED9121; transform:rotate(-25deg); -moz-transform:rotate(-25deg); -webkit-transform:rotate(-25deg); animation:ondu3 2s alternate infinite; -moz-animation:ondu3 2s alternate infinite; -webkit-animation:ondu3 2s alternate infinite; margin:-37px 12px } .h3{ position:absolute; width:152px; height:132px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu5 3s alternate infinite; -moz-animation:ondu5 3s alternate infinite; -webkit-animation:ondu5 3s alternate infinite; margin:-45px 21px; transform:rotate(-21deg); -moz-ransform:rotate(-21deg); -webkit-transform:rotate(-21deg); } .h4{ position:absolute; width:152px; height:132px; border-radius:100%; border-bottom:3px solid #ED9121; animation:ondu7 1s alternate infinite; -moz-animation:ondu7 1s alternate infinite; -webkit-animation:ondu7 1s alternate infinite; margin:-35px 33px; transform:rotate(-21deg); -moz-transform:rotate(-21deg); -webkit-transform:rotate(-21deg); } .h5{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu9 3s alternate infinite; -moz-animation:ondu9 3s alternate infinite; -webkit-animation:ondu9 3s alternate infinite; margin:-30px 33px; transform:rotate(-12deg); -moz-transform:rotate(-12deg); -webkit-transform:rotate(-12deg); } .h6{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu12 2s alternate infinite; -moz-animation:ondu12 2s alternate infinite; -webkit-animation:ondu12 2s alternate infinite; margin:-18px 33px; } .h7{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:3px solid #ED9121; animation:ondu14 1s alternate infinite; -moz-animation:ondu14 1s alternate infinite; -webkit-animation:ondu14 1s alternate infinite; margin:-9px 33px; transform:rotate(9deg); -moz-transform:rotate(9deg); -webkit-transform:rotate(9deg); } .h8{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu16 3s alternate infinite; -moz-animation:ondu16 3s alternate infinite; -webkit-animation:ondu16 3s alternate infinite; margin:0px 43px; transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } .h9{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:6px solid #ED9121; animation:ondu17 2s alternate infinite; -moz-animation:ondu17 2s alternate infinite; -webkit-animation:ondu17 2s alternate infinite; margin:9px 43px; transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } .h12{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:5px solid #ED9121; animation:ondu21 1s alternate infinite; -moz-animation:ondu21 1s alternate infinite; -webkit-animation:ondu21 1s alternate infinite; margin:19px 43px; transform:rotate(19deg); -moz-transform:rotate(19deg); -webkit-transform:rotate(19deg); } .h14{ position:absolute; width:172px; height:132px; border-radius:100%; border-bottom:5px solid #ED9121; animation:ondu23 3s alternate infinite; -moz-animation:ondu23 3s alternate infinite; -webkit-animation:ondu23 3s alternate infinite; margin:27px 43px; transform:rotate(25deg); -moz-transform:rotate(25deg); -webkit-transform:rotate(25deg); } .h16{ position:absolute; width:192px; height:132px; border-radius:100%; border-bottom:5px solid #ED9121; animation:ondu25 2s alternate infinite; -moz-animation:ondu25 2s alternate infinite; -webkit-animation:ondu25 2s alternate infinite; margin:37px 43px; transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } .h17{ position:absolute; width:192px; height:132px; border-radius:100%; border-bottom:3px solid #ED9121; animation:ondu30 1s alternate infinite; -moz-animation:ondu30 1s alternate infinite; -webkit-animation:ondu30 1s alternate infinite; margin:50px 47px; transform:rotate(21deg); -moz-transform:rotate(21deg); -webkit-transform:rotate(21deg); } .h19{ position:absolute; width:192px; height:132px; border-radius:100%; border-bottom:5px solid #ED9121; animation:ondu33 3s alternate infinite; -moz-animation:ondu33 3s alternate infinite; -webkit-animation:ondu33 3s alternate infinite; margin:43px 47px; transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } .h21{ position:absolute; width:192px; height:132px; border-radius:100%; border-bottom:5px solid #ED9121; animation:ondu35 3s alternate infinite; -moz-animation:ondu35 3s alternate infinite; -webkit-animation:ondu35 3s alternate infinite; margin:55px 47px; transform:rotate(21deg); -moz-transform:rotate(21deg); -webkit-transform:rotate(21deg); } .head{ position:absolute; width:90px; height:90px; border-radius:100%; background:#073035; margin:65px 182px ; } .head::before{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:#541254; margin:35px 33px } .body{ position:absolute; width:16px; height:21px; background:#073035; margin:142px 221px } .body::before{ content:""; display:block; width:80px; height:12px; border-radius:9px; background:#073035; margin:21px -30px } .body3{ position:absolute; width: 100px; height: 150px; border-top: 40px solid #073035; border-left: 40px solid transparent; border-right: 40px solid transparent; -moz-border-radius: 100px / 100px; -webkit-border-radius: 100px / 100px; border-radius: 100px / 100px; transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); margin:125px 60px } .body3::before{ content:""; position:absolute; width: 100px; height: 150px; border-bottom: 40px solid #073035; border-left: 40px solid transparent; border-right: 40px solid transparent; -moz-border-radius: 100px / 100px; -webkit-border-radius: 100px / 100px; border-radius: 100px / 100px; margin:-201px -37px } .body::after{ content:""; display:block; width: 0; height: 0; border-left: 95px solid transparent; border-right: 95px solid transparent; border-bottom: 251px solid #541254;; margin:-9px -85px } .brazos{ position:absolute; width:16px; height:102px; border-radius:9px; background:#073035; margin:172px 182px; border-bottom:21px solid #330021; transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } .brazos::before{ content:""; position:absolute; width:16px; height:102px; border-radius:9px; background:#073035; margin:-21px 80px; border-bottom:21px solid #330021; transform:rotate(-24deg); -moz-transform:rotate(-24deg); -webkit-transform:rotate(-24deg); } .botas{ position:absolute; width:25px; height:70px; border-radius: 0 0 12px 12px; background:#330021; margin:433px 207px; } .botas::before{ content:""; position:absolute; width:25px; height:70px; border-radius: 0 0 12px 12px; background:#330021; margin:0px 21px } .dibujo{ position:absolute; margin: -281px 70px } @keyframes ondu{ 0%{margin:-12px 12px;} 100%{margin:-9px 16px;} } @-moz-keyframes ondu{ 0%{margin:-12px 12px;} 100%{margin:-9px 16px;} } @-webkit-keyframes ondu{ 0%{margin:-12px 12px;} 100%{margin:-9px 16px;} } @keyframes ondu3{ 0%{margin:-37px 12px;} 100%{margin:-35px 9px;} } @-moz-keyframes ondu3{ 0%{margin:-37px 12px;} 100%{margin:-35px 9px;} } @-webkit-keyframes ondu3{ 0%{margin:-37px 12px;} 100%{margin:-35px 9px;} } @keyframes ondu5{ 0%{margin:-45px 21px;} 100%{margin:-47px 25px;;} } @-moz-keyframes ondu5{ 0%{margin:-45px 21px;} 100%{margin:-47px 25px;;} } @-webkit-keyframes ondu5{ 0%{margin:-45px 21px;} 100%{margin:-47px 25px;;} } @keyframes ondu7{ 0%{margin:-35px 33px;} 100%{margin:-37px 30px;} } @-moz-keyframes ondu7{ 0%{margin:-35px 33px;} 100%{margin:-37px 30px;} } @-webkit-keyframes ondu7{ 0%{margin:-35px 33px;} 100%{margin:-37px 30px;} } @keyframes ondu9{ 0%{ margin:-30px 33px;} 100%{ margin:-33px 30px;} } @-moz-keyframes ondu9{ 0%{ margin:-30px 33px;} 100%{ margin:-33px 30px;} } @-webkit-keyframes ondu9{ 0%{ margin:-30px 33px;} 100%{ margin:-33px 30px;} } @keyframes ondu12{ 0%{ margin:-18px 33px;} 100%{margin:-21px 35px;} } @-moz-keyframes ondu12{ 0%{ margin:-18px 33px;} 100%{margin:-21px 35px;} } @-webkit-keyframes ondu12{ 0%{ margin:-18px 33px;} 100%{margin:-21px 35px;} } @keyframes ondu14 { 0%{margin:-9px 33px;} 100%{margin:-7px 35px;} } @-moz-keyframes ondu14 { 0%{margin:-9px 33px;} 100%{margin:-7px 35px;} } @-webkit-keyframes ondu14 { 0%{margin:-9px 33px;} 100%{margin:-7px 35px;} } @keyframes ondu16{ 0%{margin:0px 43px;} 100%{margin:3px 45px;} } @-moz-keyframes ondu16{ 0%{margin:0px 43px;} 100%{margin:3px 45px;} } @-webkit-keyframes ondu16{ 0%{margin:0px 43px;} 100%{margin:3px 45px;} } @keyframes ondu17 { 0%{ margin:9px 43px;} 100%{ margin:12px 45px;} } @-moz-keyframes ondu17 { 0%{ margin:9px 43px;} 100%{ margin:12px 45px;} } @-webkit-keyframes ondu17 { 0%{ margin:9px 43px;} 100%{ margin:12px 45px;} } @keyframes ondu21 { 0%{ margin:19px 43px;} 100%{ margin:21px 45px;} } @-moz-keyframes ondu21 { 0%{ margin:19px 43px;} 100%{ margin:21px 45px;} } @-webkit-keyframes ondu21 { 0%{ margin:19px 43px;} 100%{ margin:21px 45px;} } @keyframes ondu23 { 0%{ margin:27px 43px;} 100%{ margin:30px 45px;} } @-moz-keyframes ondu23 { 0%{ margin:27px 43px;} 100%{ margin:30px 45px;} } @-webkit-keyframes ondu23 { 0%{ margin:27px 43px;} 100%{ margin:30px 45px;} } @keyframes ondu25 { 0%{ margin:37px 43px;} 100%{margin:33px 45px;} } @-moz-keyframes ondu25 { 0%{ margin:37px 43px;} 100%{margin:33px 45px;} } @-webkit-keyframes ondu25 { 0%{ margin:37px 43px;} 100%{margin:33px 45px;} } @keyframes ondu30 { 0%{ margin:50px 47px;} 100%{ margin:47px 40px;} } @-moz-keyframes ondu30 { 0%{ margin:50px 47px;} 100%{ margin:47px 40px;} } @-webkit-keyframes ondu30 { 0%{ margin:50px 47px;} 100%{ margin:47px 40px;} } @keyframes ondu33 { 0%{margin:43px 47px;} 100%{margin:40px 45px;} } @-moz-keyframes ondu33 { 0%{margin:43px 47px;} 100%{margin:40px 45px;} } @-webkit-keyframes ondu33 { 0%{margin:43px 47px;} 100%{margin:40px 45px;} } @keyframes ondu35 { 0%{margin:55px 47px;} 100%{margin:53px 45px;} } @-moz-keyframes ondu35 { 0%{margin:55px 47px;} 100%{margin:53px 45px;} } @-webkit-keyframes ondu35 { 0%{margin:55px 47px;} 100%{margin:53px 45px;} } @-webkit-keyframes glitter { 0% { -webkit-transform: scale(1.0); opacity: 1; } 25% { -webkit-transform: scale(0.5); opacity: 0; } 50% { -webkit-transform: scale(1.0); opacity: 1; } 75% { -webkit-transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1.0); opacity: 1; } } @-moz-keyframes glitter { 0% { -moz-transform: scale(1.0); opacity: 1; } 25% { -moz-transform: scale(0.5); opacity: 0; } 50% { -moz-transform: scale(1.0); opacity: 1; } 75% { -moz-transform: scale(0.5); opacity: 0; } 100% { -moz-transform: scale(1.0); opacity: 1; } } @keyframes glitter { 0% {transform: scale(1.0); opacity: 1; } 25% {transform: scale(0.5); opacity: 0; } 50% {transform: scale(1.0); opacity: 1; } 75% {transform: scale(0.5); opacity: 0; } 100% {transform: scale(1.0); opacity: 1; } }
JAVASCRIPT
Expand for more options Login