CSS
body{
background:#070707;
}
.contenedor{
position:relative;
width:700px;
height:700px;
border-radius:100%;
background:#010207;
border:3px solid #051026;
margin:121px auto;
}
.luna{
position:absolute;
width:60px;
height:60px;
border-radius:100%;
background:white;
margin: 60px 321px;
box-shadow:1px 0 33px #FFf;
-moz-box-shadow:1px 0 33px #FFf;
-ms-box-shadow:1px 0 33px #FFf;
-o-box-shadow:1px 0 33px #FFf;
-webkit-box-shadow:1px 0 33px #FFf;
}
.hada{
position:absolute;
margin:0 30px;
-moz-animation:volar 3s alternate infinite;
-webkit-animation: volar 3s alternate infinite;
animation:volar 3s alternate infinite;
}
.cabeza{
position:absolute;
width:40px;
height:45px;
border-radius:100%;
background:white;
margin:231px 300px;
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.cabeza::before{
content:"";
display:block;
width:50px;
height:60px;
border-radius:100%;
border-top:12px solid white;
margin:-5px -5px;
}
.cabeza::after{
content:"";
display:block;
width:50px;
height:121px;
border-radius:100%;
border-top:9px solid white;
margin:-70px -5px
}
.h1{
position:absolute;
width:50px;
height:90px;
border-radius:100%;
border-top:12px solid white;
margin:-65px -5px
}
.h1::before{
content:"";
display:block;
width:70px;
height:192px;
border-radius:100%;
border-top:12px solid white;
margin:0px -9px
}
.h1::after{
content:"";
display:block;
width:80px;
height:192px;
border-radius:100%;
border-top:7px solid white;
margin:-195px -14px
}
.h2{
position:absolute;
width:60px;
height:90px;
border-radius:100%;
border-top:12px solid white;
margin:-55px -9px
}
.h2::before{
content:"";
display:block;
width:70px;
height:192px;
border-radius:100%;
border-top:12px solid white;
margin:-21px -9px
}
.h2::after{
content:"";
display:block;
width:80px;
height:192px;
border-radius:100%;
border-top:12px solid white;
margin:-205px -11px
}
.h3{
position:absolute;
width:21px;
height:40px;
border-radius:100%;
border-right:1px solid white;
margin:-43px -18px
}
.h3::before{
content:"";
position:absolute;
width:21px;
height:40px;
border-radius:100%;
border-left:1px solid white;
margin:0px 55px
}
.h4{
position:absolute;
width:21px;
height:50px;
border-radius:100%;
border-right:1px solid white;
margin:-37px -18px
}
.h4::before{
content:"";
position:absolute;
width:21px;
height:50px;
border-radius:100%;
border-left:1px solid white;
margin:0px 55px
}
.body{
position:absolute;
width:8px;
height:12px;
background:white;
margin:270px 317px
}
.body::before{
content:"";
position:absolute;
width:50px;
height:9px;
border-radius:12px;
background:white;
margin:12px -21px;
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.body::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 50px solid white;
margin:16px -13px;
}
.brazo{
position:absolute;
width:9px;
height:40px;
border-radius:100%;
background:white;
margin:8px 28px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.brazo::before{
content:"";
position:absolute;
width:7px;
height:45px;
border-radius:100%;
background:white;
margin:25px 1px
}
.brazo::after{
content:"";
display:block;
width:5px;
height:12px;
border-radius:100%;
border-left:5px solid white;
margin:65px 3px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
}
.brazo3{
position:absolute;
width:9px;
height:40px;
border-radius:100%;
background:white;
-webkit-transform:rotate(-142deg);
transform:rotate(-142deg);
-moz-transform:rotate(-142deg);
margin:8px -26px;
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.brazo3::before{
content:"";
position:absolute;
width:7px;
height:45px;
border-radius:100%;
background:white;
margin:-33px 0px
}
.brazo3::after{
content:"";
display:block;
width:5px;
height:12px;
border-radius:100%;
border-left:5px solid white;
margin:-40px 3px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
-moz-transform:rotate(50deg);
}
.falda{
position:absolute;
border-bottom: 40px solid white;
border-left: 23px solid transparent;
border-right: 21px solid transparent;
height: 0;
width: 12px;
margin:47px -23px;
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs{
position:absolute;
width:14px;
height:65px;
border-radius:100%;
background:white;
margin:330px 300px;
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
-moz-transform:rotate(35deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs::before{
content:"";
display:block;
width:9px;
height:55px;
border-radius:100%;
background:white;
margin:49px 21px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs::after{
content:"";
display:block;
width:7px;
height:21px;
border-radius:100%;
border-left:5px solid white;
margin:-65px 47px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs3{
position:absolute;
width:14px;
height:65px;
border-radius:100%;
background:white;
margin:335px 319px;
-webkit-transform:rotate(21deg);
transform:rotate(21deg);
-moz-transform:rotate(21deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs3::before{
content:"";
display:block;
width:9px;
height:55px;
border-radius:100%;
background:white;
margin:47px 19px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.legs3::after{
content:"";
display:block;
width:7px;
height:21px;
border-radius:100%;
border-left:5px solid white;
margin:-65px 47px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-webkit-filter:blur(1.2px);
filter:blur(1.2px);
-moz-filter:blur(1.2px);
}
.arboles{
position:absolute;
width:70px;
height:412px;
background:#00080C;
margin:162px 121px
}
.arboles::before{
content:"";
position:absolute;
width:12px;
height:121px;
background:#00080C;
margin:70px -45px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
}
.arboles::after{
content:"";
position:absolute;
width:12px;
height:121px;
background:#00080C;
margin:192px 90px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
-moz-transform:rotate(50deg);
}
.arboles3{
position:absolute;
width:70px;
height:412px;
background:#00080C;
margin:162px 512px
}
.arboles3::before{
content:"";
position:absolute;
width:12px;
height:121px;
background:#00080C;
margin:70px -45px;
-webkit-transform:rotate(-50deg);
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
}
.arboles3::after{
content:"";
position:absolute;
width:12px;
height:121px;
background:#00080C;
margin:192px 90px;
-webkit-transform:rotate(50deg);
transform:rotate(50deg);
-moz-transform:rotate(50deg);
}
.alas{
position:absolute;
width:60px;
height:60px;
border-radius:8px 121px 30px 121px;
background:rgba(255, 255, 255, .5);
border:2px solid white;
margin:251px 261px;
-moz-animation:volar3 .1s alternate infinite;
-webkit-animation: volar3 .1s alternate infinite;
animation:volar3 .1s alternate infinite;
}
.alas::before{
content:"";
position:absolute;
width:60px;
height:60px;
border-radius:121px 8px 121px 30px;
background:rgba(255, 255, 255, .5);
border:2px solid white;
margin:0px 53px
}
.alas3{
position:absolute;
width:60px;
height:60px;
border-radius:8px 121px 30px 121px;
background:rgba(255, 255, 255, .5);
border:2px solid white;
margin:291px 261px;
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-moz-animation:volar7 .1s alternate infinite;
-webkit-animation: volar7 .1s alternate infinite;
animation:volar7 .1s alternate infinite;
}
.alas3::before{
content:"";
position:absolute;
width:60px;
height:60px;
border-radius:121px 8px 121px 30px;
background:rgba(255, 255, 255, .5);
border:2px solid white;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transform:rotate(180deg);
margin:50px 0px
}
.stars{
transform:scale(.5);
-moz-transform:scale(.5);
-webkit-transform:scale(.5);
}
.star{
display: block;
position: absolute;
margin:730px 201px;
width: 24px;
height: 24px;
background: white;
overflow:hidden;
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;
}
.star6{
display: block;
position: absolute;
margin:555px 192px;
width: 24px;
height: 24px;
background: white;
overflow:hidden;
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;
}
.star3,.star5{
position: absolute;
display: block;
margin:0px 0px;
z-index:3333;
}
.star3:before ,
.star3:after ,
.star5:before ,
.star5:after{
content: "";
width: 24px;
height: 24px;
background: #010207;
border-radius: 50%;
position: absolute;
}
.star3:before {
top: -12px;
left: -12px;
}
.star3:after {
bottom: -12px;
left: 12px;
}
.star5:before {
top: 12px;
left: -12px;
}
.star5:after {
top: 12px;
left: 12px;
}
.star8{
display: block;
position: absolute;
margin:400px 335px;
width: 24px;
height: 24px;
background: white;
overflow: hidden;
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;
}
.star7{
display: block;
position: absolute;
margin:565px 480px;
width: 24px;
height: 24px;
background: white;
overflow: hidden;
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;
}
.star9{
display: block;
position: absolute;
margin:730px 470px;
width: 24px;
height: 24px;
background: white;
overflow: hidden;
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;
}
.star12{
display: block;
position: absolute;
margin:930px 291px;
width: 24px;
height: 24px;
background: white;
overflow: hidden;
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;
}
.star21{
display: block;
position: absolute;
margin:930px 400px;
width: 24px;
height: 24px;
background: white;
overflow: hidden;
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;
}
.varita{
position:absolute;
width:2px;
height:50px;
background: white;
transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-webkit-transform: rotate(-75deg);
margin:-57px 21px
}
.stars3{
position:absolute;
width:16px;
height:16px;
border-radius:100%;
background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(23%, rgba(255,255,255,1)), color-stop(40%, rgba(115,115,115,1)), color-stop(100%, rgba(115,115,115,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#737373', GradientType=1 );
margin:35px -7px;
box-shadow:1px 0 33px #FFf;
-moz-box-shadow:1px 0 33px #FFf;
-ms-box-shadow:1px 0 33px #FFf;
-o-box-shadow:1px 0 33px #FFf;
-webkit-box-shadow:1px 0 33px #FFf;
animation: enciende alternate infinite 12s;
-moz-animation: enciende alternate infinite 12s;
-webkit-animation: enciende alternate infinite 12s;
}
@-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 volar3 {0% {transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);}
50% {-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);opacity:.7;}
100% {transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);}}
@-moz-keyframes volar3 {0% {transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);}
50% {-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);opacity:.7;}
100% {transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);}}
@-webkit-keyframes volar3 {0% {transform: rotate(3deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);}
50% {-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);opacity:.7;}
100% {transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);}}
@keyframes volar7 {0% {transform: rotate(-96deg);
-moz-transform: rotate(-96deg);
-webkit-transform: rotate(-96deg);}
50% {-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);opacity:.7;}
100% {transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-webkit-transform: rotate(-93deg);}}
@-moz-keyframes volar7 {0% {transform: rotate(-96deg);
-moz-transform: rotate(-96deg);
-webkit-transform: rotate(-96deg);}
50% {-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);opacity:.7;}
100% {transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-webkit-transform: rotate(-93deg);}}
@-webkit-keyframes volar7 {0% {transform: rotate(-96deg);
-moz-transform: rotate(-96deg);
-webkit-transform: rotate(-96deg);}
50% {-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);opacity:.7;}
100% {transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-webkit-transform: rotate(-93deg);}}
@keyframes volar{
0%{margin:-9px 30px;}
50%{margin:0px 30px;}
100%{margin:9px 30px;}
}
@-moz-keyframes volar{
0%{margin:-9px 30px;}
50%{margin:0px 30px;}
100%{margin:9px 30px;}
}
@-webkit-keyframes volar{
0%{margin:-9px 30px;}
50%{margin:0px 30px;}
100%{margin:9px 30px;}
}
@-webkit-keyframes enciende {
0% {opacity: 1; }
50%{opacity:.7; }
100% {opacity: 1;}
}
@keyframes enciende {
0% {opacity: 1; }
50%{opacity:.7; }
100% {opacity: 1;}
}
@-moz-keyframes enciende {
0% {opacity: 1; }
50%{opacity:.7; }
100% {opacity: 1;}
}
