Fairy in the night

HTML
<div class="contenedor"> <div class="luna"></div> <div class="arboles"></div> <div class="arboles3"></div> <div class="stars"> <div class="star"> <span class="star3"></span> <span class="star5"></span> </div> <div class="star6"> <span class="star3"></span> <span class="star5"></span> </div> <div class="star7"> <span class="star3"></span> <span class="star5"></span></div> <div class="star8"> <span class="star3"></span> <span class="star5"></span></div> <div class="star9"> <span class="star3"></span> <span class="star5"></span></div> <div class="star12"> <span class="star3"></span> <span class="star5"></span></div> <div class="star21"> <span class="star3"></span> <span class="star5"></span></div> </div> <div class="hada"> <div class="alas"></div> <div class="alas3"></div> <div class="cabeza"> <span class="h1"></span> <span class="h2"></span> <span class="h3"></span> <span class="h4"></span> </div> <div class="legs"></div> <div class="legs3"></div> <div class="body"> <div class="falda"></div> <div class="brazo"></div> <div class="brazo3"><span class="varita"><div class="stars3"> </div></span></div> </div> </div> </div>
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;} }
JAVASCRIPT
Expand for more options Login