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; }
}
