CSS
body{
background:black;
}
.contenedor{
position:relative;
width:500px;
height:500px;
border-radius:100%;
background:lightblue;
perspective: 800px;
perspective-origin: 50% 0%;
margin:231px auto;
}
.caja{
position:absolute;
width:70px;
height:30px;
animation:sube 3s alternate infinite;
-moz-animation:sube 3s alternate infinite;
-webkit-animation:sube 3s alternate infinite;
}
.ice{
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.ice div {
position: absolute;
margin:0px 0px;
width:65px;
height:112px;
border-radius:70px 70px 12px 12px;
}
.lin{
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.lin div {
position: absolute;
margin:112px 21px;
width:21px;
height:50px;
border-radius:0 0 70px 70px ;
}
.ice2, .ice3, .ice4, .ice5, .ice6, .ice7,.ice8, .ice9, .ice10, .ice11, .ice12,.ice13, .ice14, .ice15, .ice16, .ice17,.ice18, .ice19, .ice20, .ice21{
background: -moz-linear-gradient(top, #f934f9 0%, #f934f9 50%, #f788d4 50%, #f934f9 50%, #f788d4 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f934f9), color-stop(50%,#f934f9), color-stop(50%,#f788d4), color-stop(50%,#f934f9), color-stop(50%,#f788d4));
background: -webkit-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%);
background: -o-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%);
background: -ms-linear-gradient(top, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%);
background: linear-gradient(to bottom, #f934f9 0%,#f934f9 50%,#f788d4 50%,#f934f9 50%,#f788d4 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f934f9', endColorstr='#f788d4',GradientType=0 );
}
.ice1{
transform: rotateY(-300deg) translatez(1px);
-moz-transform: rotateY(-300deg) translatez(1px);
-webkit-transform: rotateY(-300deg) translatez(1px);
transform-origin: top center;
background: #db59d0;
background: -moz-linear-gradient(top, #db59d0 0%, #f75bf7 50%, #f49cd8 50%, #f49cd8 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db59d0), color-stop(50%,#f75bf7), color-stop(50%,#f49cd8), color-stop(50%,#f49cd8));
background: -webkit-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: -o-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: -ms-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: linear-gradient(to bottom, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db59d0', endColorstr='#f49cd8',GradientType=0 );
animation:rotar1 3s linear infinite;
-moz-animation:rotar1 3s linear infinite;
-webkit-animation:rotar1 3s linear infinite;
}
.ice1::before{
content:"";
display:block;
width:7px;
height:70px;
background:rgba(255,255,255,.3);
margin:30px 7px;
}
.ice2{
transform: rotateY(-300deg) translatez(2px);
-moz-transform: rotateY(-300deg) translatez(2px);
-webkit-transform: rotateY(-300deg) translatez(2px);
transform-origin: top center;
animation:rotar2 3s linear infinite;
-moz-animation:rotar2 3s linear infinite;
-webkit-animation:rotar2 3s linear infinite;
}
.ice3{
transform: rotateY(-300deg) translatez(3px);
-moz-transform: rotateY(-300deg) translatez(3px);
-webkit-transform: rotateY(-300deg) translatez(3px);
transform-origin: top center;
animation:rotar3 3s linear infinite;
-moz-animation:rotar3 3s linear infinite;
-webkit-animation:rotar3 3s linear infinite;
}
.ice4{
transform: rotateY(-300deg) translatez(4px);
-moz-transform: rotateY(-300deg) translatez(4px);
-webkit-transform: rotateY(-300deg) translatez(4px);
transform-origin: top center;
animation:rotar4 3s linear infinite;
-moz-animation:rotar4 3s linear infinite;
-webkit-animation:rotar4 3s linear infinite;
}
.ice5{
transform: rotateY(-300deg) translatez(5px);
-moz-transform: rotateY(-300deg) translatez(5px);
-webkit-transform: rotateY(-300deg) translatez(5px);
transform-origin: top center;
animation:rotar5 3s linear infinite;
-moz-animation:rotar5 3s linear infinite;
-webkit-animation:rotar5 3s linear infinite;
}
.ice6 {
transform: rotateY(-300deg) translatez(6px);
-moz-transform: rotateY(-300deg) translatez(6px);
-webkit-transform: rotateY(-300deg) translatez(6px);
transform-origin: top center;
animation:rotar6 3s linear infinite;
-moz-animation:rotar6 3s linear infinite;
-webkit-animation:rotar6 3s linear infinite;
}
.ice7{
transform: rotateY(-300deg) translatez(7px);
-moz-transform: rotateY(-300deg) translatez(7px);
-webkit-transform: rotateY(-300deg) translatez(7px);
transform-origin: top center;
animation:rotar7 3s linear infinite;
-moz-animation:rotar7 3s linear infinite;
-webkit-animation:rotar7 3s linear infinite;
}
.ice8{
transform: rotateY(-300deg) translatez(8px);
-moz-transform: rotateY(-300deg) translatez(8px);
-webkit-transform: rotateY(-300deg) translatez(8px);
transform-origin: top center;
animation:rotar8 3s linear infinite;
-moz-animation:rotar8 3s linear infinite;
-webkit-animation:rotar8 3s linear infinite;
}
.ice9{
transform: rotateY(-300deg) translatez(9px);
-moz-transform: rotateY(-300deg) translatez(9px);
-webkit-transform: rotateY(-300deg) translatez(9px);
transform-origin: top center;
animation:rotar9 3s linear infinite;
-moz-animation:rotar9 3s linear infinite;
-webkit-animation:rotar9 3s linear infinite;
}
.ice10{
transform: rotateY(-300deg) translatez(10px);
-moz-transform: rotateY(-300deg) translatez(10px);
-webkit-transform: rotateY(-300deg) translatez(10px);
transform-origin: top center;
animation:rotar10 3s linear infinite;
-moz-animation:rotar10 3s linear infinite;
-webkit-animation:rotar10 3s linear infinite;
}
.ice11{
transform: rotateY(-300deg) translatez(11px);
-moz-transform: rotateY(-300deg) translatez(11px);
-webkit-transform: rotateY(-300deg) translatez(11px);
transform-origin: top center;
animation:rotar11 3s linear infinite;
-moz-animation:rotar11 3s linear infinite;
-webkit-animation:rotar11 3s linear infinite;
}
.ice12{
transform: rotateY(-300deg) translatez(12px);
-moz-transform: rotateY(-300deg) translatez(12px);
-webkit-transform: rotateY(-300deg) translatez(12px);
transform-origin: top center;
animation:rotar12 3s linear infinite;
-moz-animation:rotar12 3s linear infinite;
-webkit-animation:rotar12 3s linear infinite;
}
.ice13{
transform: rotateY(-300deg) translatez(13px);
-moz-transform: rotateY(-300deg) translatez(13px);
-webkit-transform: rotateY(-300deg) translatez(13px);
transform-origin: top center;
animation:rotar13 3s linear infinite;
-moz-animation:rotar13 3s linear infinite;
-webkit-animation:rotar13 3s linear infinite;
}
.ice14{
transform: rotateY(-300deg) translatez(14px);
-moz-transform: rotateY(-300deg) translatez(14px);
-webkit-transform: rotateY(-300deg) translatez(14px);
transform-origin: top center;
animation:rotar14 3s linear infinite;
-moz-animation:rotar14 3s linear infinite;
-webkit-animation:rotar14 3s linear infinite;
}
.ice15{
transform: rotateY(-300deg) translatez(15px);
-moz-transform: rotateY(-300deg) translatez(15px);
-webkit-transform: rotateY(-300deg) translatez(15px);
transform-origin: top center;
animation:rotar15 3s linear infinite;
-moz-animation:rotar15 3s linear infinite;
-webkit-animation:rotar15 3s linear infinite;
}
.ice16{
transform: rotateY(-300deg) translatez(16px);
-moz-transform: rotateY(-300deg) translatez(16px);
-webkit-transform: rotateY(-300deg) translatez(16px);
transform-origin: top center;
animation:rotar16 3s linear infinite;
-moz-animation:rotar16 3s linear infinite;
-webkit-animation:rotar16 3s linear infinite;
}
.ice17{
transform: rotateY(-300deg) translatez(17px);
-moz-transform: rotateY(-300deg) translatez(17px);
-webkit-transform: rotateY(-300deg) translatez(17px);
transform-origin: top center;
animation:rotar17 3s linear infinite;
-moz-animation:rotar17 3s linear infinite;
-webkit-animation:rotar17 3s linear infinite;
}
.ice18{
transform: rotateY(-300deg) translatez(18px);
-moz-transform: rotateY(-300deg) translatez(18px);
-webkit-transform: rotateY(-300deg) translatez(18px);
transform-origin: top center;
animation:rotar18 3s linear infinite;
-moz-animation:rotar18 3s linear infinite;
-webkit-animation:rotar18 3s linear infinite;
}
.ice19{
transform: rotateY(-300deg) translatez(19px);
-moz-transform: rotateY(-300deg) translatez(19px);
-webkit-transform: rotateY(-300deg) translatez(19px);
transform-origin: top center;
animation:rotar19 3s linear infinite;
-moz-animation:rotar19 3s linear infinite;
-webkit-animation:rotar19 3s linear infinite;
}
.ice20{
transform: rotateY(-300deg) translatez(20px);
-moz-transform: rotateY(-300deg) translatez(20px);
-webkit-transform: rotateY(-300deg) translatez(20px);
transform-origin: top center;
animation:rotar20 3s linear infinite;
-moz-animation:rotar20 3s linear infinite;
-webkit-animation:rotar20 3s linear infinite;
}
.ice21{
transform: rotateY(-300deg) translatez(21px);
-moz-transform: rotateY(-300deg) translatez(21px);
-webkit-transform: rotateY(-300deg) translatez(21px);
transform-origin: top center;
background: #db59d0;
background: -moz-linear-gradient(top, #db59d0 0%, #f75bf7 50%, #f49cd8 50%, #f49cd8 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#db59d0), color-stop(50%,#f75bf7), color-stop(50%,#f49cd8), color-stop(50%,#f49cd8));
background: -webkit-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: -o-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: -ms-linear-gradient(top, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
background: linear-gradient(to bottom, #db59d0 0%,#f75bf7 50%,#f49cd8 50%,#f49cd8 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db59d0', endColorstr='#f49cd8',GradientType=0 );
animation:rotar21 3s linear infinite;
-moz-animation:rotar21 3s linear infinite;
-webkit-animation:rotar21 3s linear infinite;
}
.ice21::before{
content:"";
display:block;
width:7px;
height:70px;
background:rgba(255,255,255,.3);
margin:30px 50px
}
.l1{
transform: rotateY(-300deg) translatez(5px);
-moz-transform: rotateY(-300deg) translatez(5px);
-webkit-transform: rotateY(-300deg) translatez(5px);
transform-origin: top center;
background:#F2D1AB;
animation:rotar5 3s linear infinite;
-moz-animation:rotar5 3s linear infinite;
-webkit-animation:rotar5 3s linear infinite;}
.l2{
transform: rotateY(-300deg) translatez(6px);
-moz-transform: rotateY(-300deg) translatez(6px);
-webkit-transform: rotateY(-300deg) translatez(6px);
transform-origin: top center;
background:#F4C084;
animation:rotar6 3s linear infinite;
-moz-animation:rotar6 3s linear infinite;
-webkit-animation:rotar6 3s linear infinite;}
.l3{
transform: rotateY(-300deg) translatez(7px);
-moz-transform: rotateY(-300deg) translatez(7px);
-webkit-transform: rotateY(-300deg) translatez(7px);
transform-origin: top center;
background:#F4C084;
animation:rotar7 3s linear infinite;
-moz-animation:rotar7 3s linear infinite;
-webkit-animation:rotar7 3s linear infinite;}
.l4{
transform: rotateY(-300deg) translatez(8px);
-moz-transform: rotateY(-300deg) translatez(8px);
-webkit-transform: rotateY(-300deg) translatez(8px);
transform-origin: top center;
background:#F4C084;
animation:rotar8 3s linear infinite;
-moz-animation:rotar8 3s linear infinite;
-webkit-animation:rotar8 3s linear infinite;
}
.l5{
transform: rotateY(-300deg) translatez(9px);
-moz-transform: rotateY(-300deg) translatez(9px);
-webkit-transform: rotateY(-300deg) translatez(9px);
transform-origin: top center;
background:#F4C084;
animation:rotar9 3s linear infinite;
-moz-animation:rotar9 3s linear infinite;
-webkit-animation:rotar9 3s linear infinite;}
.l6{
transform: rotateY(-300deg) translatez(10px);
-moz-transform: rotateY(-300deg) translatez(10px);
-webkit-transform: rotateY(-300deg) translatez(10px);
transform-origin: top center;
background:#F4C084;
animation:rotar10 3s linear infinite;
-moz-animation:rotar10 3s linear infinite;
-webkit-animation:rotar10 3s linear infinite;}
.l7{
transform: rotateY(-300deg) translatez(11px);
-moz-transform: rotateY(-300deg) translatez(11px);
-webkit-transform: rotateY(-300deg) translatez(11px);
transform-origin: top center;
background:#F4C084;
animation:rotar11 3s linear infinite;
-moz-animation:rotar11 3s linear infinite;
-webkit-animation:rotar11 3s linear infinite;}
.l8{
transform: rotateY(-300deg) translatez(12px);
-moz-transform: rotateY(-300deg) translatez(12px);
-webkit-transform: rotateY(-300deg) translatez(12px);
transform-origin: top center;
background:#F2D1AB;
animation:rotar12 3s linear infinite;
-moz-animation:rotar12 3s linear infinite;
-webkit-animation:rotar12 3s linear infinite;}
.viento{
position:absolute;
width:3px;
height:70px;
background:white;
margin:330px 251px;
animation:sube3 3s alternate infinite;
-moz-animation:sube3 3s alternate infinite;
-webkit-animation:sube3 3s alternate infinite;
}
.viento3{
position:absolute;
width:3px;
height:60px;
background:white;
margin:330px 241px;
animation:sube5 3s alternate infinite;
-moz-animation:sube5 3s alternate infinite;
-webkit-animation:sube5 3s alternate infinite;
}
.viento5{
position:absolute;
width:3px;
height:60px;
background:white;
margin:312px 231px;
animation:sube7 3s alternate infinite;
-moz-animation:sube7 3s alternate infinite;
-webkit-animation:sube7 3s alternate infinite;
}
.nube{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
background:white;
margin:192px 70px;
animation:sube9 3s alternate infinite;
-moz-animation:sube9 3s alternate infinite;
-webkit-animation:sube9 3s alternate infinite;
}
.nube::before{
content:"";
display:block;
width:40px;
height:40px;
border-radius:100%;
background:white;
margin:21px -12px;
}
.nube::after{
content:"";
display:block;
width:45px;
height:45px;
border-radius:100%;
background:white;
margin:-60px 21px;
}
.nube3{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
background:white;
margin:192px 370px;
animation:sube12 3s alternate infinite;
-moz-animation:sube12 3s alternate infinite;
-webkit-animation:sube12 3s alternate infinite;
}
.nube3::before{
content:"";
display:block;
width:40px;
height:40px;
border-radius:100%;
background:white;
margin:21px -12px;
}
.nube3::after{
content:"";
display:block;
width:45px;
height:45px;
border-radius:100%;
background:white;
margin:-60px 21px;
}
@keyframes rotar1{
0%{ transform: rotateY(0deg) translatez(1px);
-moz-transform: rotateY(0deg) translatez(1px);
-webkit-transform: rotateY(0deg) translatez(1px);}
100%{ transform: rotateY(-360deg) translatez(1px);
-moz-transform: rotateY(-360deg) translatez(1px);
-webkit-transform: rotateY(-360deg) translatez(1px);}
}
@-moz-keyframes rotar1{
0%{ transform: rotateY(0deg) translatez(1px);
-moz-transform: rotateY(0deg) translatez(1px);
-webkit-transform: rotateY(0deg) translatez(1px);}
100%{ transform: rotateY(-360deg) translatez(1px);
-moz-transform: rotateY(-360deg) translatez(1px);
-webkit-transform: rotateY(-360deg) translatez(1px);}
}
@-webkit-keyframes rotar1{
0%{ transform: rotateY(0deg) translatez(1px);
-moz-transform: rotateY(0deg) translatez(1px);
-webkit-transform: rotateY(0deg) translatez(1px);}
100%{ transform: rotateY(-360deg) translatez(1px);
-moz-transform: rotateY(-360deg) translatez(1px);
-webkit-transform: rotateY(-360deg) translatez(1px);}
}
@keyframes rotar2 {
0%{ transform: rotateY(0deg) translatez(2px);
-moz-transform: rotateY(0deg) translatez(2px);
-webkit-transform: rotateY(0deg) translatez(2px);}
100%{ transform: rotateY(-360deg) translatez(2px);
-moz-transform: rotateY(-360deg) translatez(2px);
-webkit-transform: rotateY(-360deg) translatez(2px);}
}
@-moz-keyframes rotar2 {
0%{ transform: rotateY(0deg) translatez(2px);
-moz-transform: rotateY(0deg) translatez(2px);
-webkit-transform: rotateY(0deg) translatez(2px);}
100%{ transform: rotateY(-360deg) translatez(2px);
-moz-transform: rotateY(-360deg) translatez(2px);
-webkit-transform: rotateY(-360deg) translatez(2px);}
}
@-webkit-keyframes rotar2 {
0%{ transform: rotateY(0deg) translatez(2px);
-moz-transform: rotateY(0deg) translatez(2px);
-webkit-transform: rotateY(0deg) translatez(2px);}
100%{ transform: rotateY(-360deg) translatez(2px);
-moz-transform: rotateY(-360deg) translatez(2px);
-webkit-transform: rotateY(-360deg) translatez(2px);}
}
@keyframes rotar3{
0%{ transform: rotateY(0deg) translatez(3px);
-moz-transform: rotateY(0deg) translatez(3px);
-webkit-transform: rotateY(0deg) translatez(3px);}
100%{ transform: rotateY(-360deg) translatez(3px);
-moz-transform: rotateY(-360deg) translatez(3px);
-webkit-transform: rotateY(-360deg) translatez(3px);}
}
@-moz-keyframes rotar3{
0%{ transform: rotateY(0deg) translatez(3px);
-moz-transform: rotateY(0deg) translatez(3px);
-webkit-transform: rotateY(0deg) translatez(3px);}
100%{ transform: rotateY(-360deg) translatez(3px);
-moz-transform: rotateY(-360deg) translatez(3px);
-webkit-transform: rotateY(-360deg) translatez(3px);}
}
@-webkit-keyframes rotar3{
0%{ transform: rotateY(0deg) translatez(3px);
-moz-transform: rotateY(0deg) translatez(3px);
-webkit-transform: rotateY(0deg) translatez(3px);}
100%{ transform: rotateY(-360deg) translatez(3px);
-moz-transform: rotateY(-360deg) translatez(3px);
-webkit-transform: rotateY(-360deg) translatez(3px);}
}
@keyframes rotar4 {
0%{ transform: rotateY(0deg) translatez(4px);
-moz-transform: rotateY(0deg) translatez(4px);
-webkit-transform: rotateY(0deg) translatez(4px);}
100%{ transform: rotateY(-360deg) translatez(4px);
-moz-transform: rotateY(-360deg) translatez(4px);
-webkit-transform: rotateY(-360deg) translatez(4px);}
}
@-moz-keyframes rotar4 {
0%{ transform: rotateY(0deg) translatez(4px);
-moz-transform: rotateY(0deg) translatez(4px);
-webkit-transform: rotateY(0deg) translatez(4px);}
100%{ transform: rotateY(-360deg) translatez(4px);
-moz-transform: rotateY(-360deg) translatez(4px);
-webkit-transform: rotateY(-360deg) translatez(4px);}
}
@-webkit-keyframes rotar4 {
0%{ transform: rotateY(0deg) translatez(4px);
-moz-transform: rotateY(0deg) translatez(4px);
-webkit-transform: rotateY(0deg) translatez(4px);}
100%{ transform: rotateY(-360deg) translatez(4px);
-moz-transform: rotateY(-360deg) translatez(4px);
-webkit-transform: rotateY(-360deg) translatez(4px);}
}
@keyframes rotar5 {
0%{ transform: rotateY(0deg) translatez(5px);
-moz-transform: rotateY(0deg) translatez(5px);
-webkit-transform: rotateY(0deg) translatez(5px);}
100%{ transform: rotateY(-360deg) translatez(5px);
-moz-transform: rotateY(-360deg) translatez(5px);
-webkit-transform: rotateY(-360deg) translatez(5px);}
}
@-moz-keyframes rotar5 {
0%{ transform: rotateY(0deg) translatez(5px);
-moz-transform: rotateY(0deg) translatez(5px);
-webkit-transform: rotateY(0deg) translatez(5px);}
100%{ transform: rotateY(-360deg) translatez(5px);
-moz-transform: rotateY(-360deg) translatez(5px);
-webkit-transform: rotateY(-360deg) translatez(5px);}
}
@-webkit-keyframes rotar5 {
0%{ transform: rotateY(0deg) translatez(5px);
-moz-transform: rotateY(0deg) translatez(5px);
-webkit-transform: rotateY(0deg) translatez(5px);}
100%{ transform: rotateY(-360deg) translatez(5px);
-moz-transform: rotateY(-360deg) translatez(5px);
-webkit-transform: rotateY(-360deg) translatez(5px);}
}
@keyframes rotar6{
0%{ transform: rotateY(0deg) translatez(6px);
-moz-transform: rotateY(0deg) translatez(6px);
-webkit-transform: rotateY(0deg) translatez(6px);}
100%{ transform: rotateY(-360deg) translatez(6px);
-moz-transform: rotateY(-360deg) translatez(6px);
-webkit-transform: rotateY(-360deg) translatez(6px);}
}
@-moz-keyframes rotar6{
0%{ transform: rotateY(0deg) translatez(6px);
-moz-transform: rotateY(0deg) translatez(6px);
-webkit-transform: rotateY(0deg) translatez(6px);}
100%{ transform: rotateY(-360deg) translatez(6px);
-moz-transform: rotateY(-360deg) translatez(6px);
-webkit-transform: rotateY(-360deg) translatez(6px);}
}
@-webkit-keyframes rotar6{
0%{ transform: rotateY(0deg) translatez(6px);
-moz-transform: rotateY(0deg) translatez(6px);
-webkit-transform: rotateY(0deg) translatez(6px);}
100%{ transform: rotateY(-360deg) translatez(6px);
-moz-transform: rotateY(-360deg) translatez(6px);
-webkit-transform: rotateY(-360deg) translatez(6px);}
}
@keyframes rotar7 {
0%{ transform: rotateY(0deg) translatez(7px);
-moz-transform: rotateY(0deg) translatez(7px);
-webkit-transform: rotateY(0deg) translatez(7px);}
100%{ transform: rotateY(-360deg) translatez(7px);
-moz-transform: rotateY(-360deg) translatez(7px);
-webkit-transform: rotateY(-360deg) translatez(7px);}
}
@-moz-keyframes rotar7 {
0%{ transform: rotateY(0deg) translatez(7px);
-moz-transform: rotateY(0deg) translatez(7px);
-webkit-transform: rotateY(0deg) translatez(7px);}
100%{ transform: rotateY(-360deg) translatez(7px);
-moz-transform: rotateY(-360deg) translatez(7px);
-webkit-transform: rotateY(-360deg) translatez(7px);}
}
@-webkit-keyframes rotar7 {
0%{ transform: rotateY(0deg) translatez(7px);
-moz-transform: rotateY(0deg) translatez(7px);
-webkit-transform: rotateY(0deg) translatez(7px);}
100%{ transform: rotateY(-360deg) translatez(7px);
-moz-transform: rotateY(-360deg) translatez(7px);
-webkit-transform: rotateY(-360deg) translatez(7px);}
}
@keyframes rotar8 {
0%{ transform: rotateY(0deg) translatez(8px);
-moz-transform: rotateY(0deg) translatez(8px);
-webkit-transform: rotateY(0deg) translatez(8px);}
100%{ transform: rotateY(-360deg) translatez(8px);
-moz-transform: rotateY(-360deg) translatez(8px);
-webkit-transform: rotateY(-360deg) translatez(8px);}
}
@-moz-keyframes rotar8 {
0%{ transform: rotateY(0deg) translatez(8px);
-moz-transform: rotateY(0deg) translatez(8px);
-webkit-transform: rotateY(0deg) translatez(8px);}
100%{ transform: rotateY(-360deg) translatez(8px);
-moz-transform: rotateY(-360deg) translatez(8px);
-webkit-transform: rotateY(-360deg) translatez(8px);}
}
@-webkit-keyframes rotar8 {
0%{ transform: rotateY(0deg) translatez(8px);
-moz-transform: rotateY(0deg) translatez(8px);
-webkit-transform: rotateY(0deg) translatez(8px);}
100%{ transform: rotateY(-360deg) translatez(8px);
-moz-transform: rotateY(-360deg) translatez(8px);
-webkit-transform: rotateY(-360deg) translatez(8px);}
}
@keyframes rotar9 {
0%{ transform: rotateY(0deg) translatez(9px);
-moz-transform: rotateY(0deg) translatez(9px);
-webkit-transform: rotateY(0deg) translatez(9px);}
100%{ transform: rotateY(-360deg) translatez(9px);
-moz-transform: rotateY(-360deg) translatez(9px);
-webkit-transform: rotateY(-360deg) translatez(9px);}
}
@-moz-keyframes rotar9 {
0%{ transform: rotateY(0deg) translatez(9px);
-moz-transform: rotateY(0deg) translatez(9px);
-webkit-transform: rotateY(0deg) translatez(9px);}
100%{ transform: rotateY(-360deg) translatez(9px);
-moz-transform: rotateY(-360deg) translatez(9px);
-webkit-transform: rotateY(-360deg) translatez(9px);}
}
@-webkit-keyframes rotar9 {
0%{ transform: rotateY(0deg) translatez(9px);
-moz-transform: rotateY(0deg) translatez(9px);
-webkit-transform: rotateY(0deg) translatez(9px);}
100%{ transform: rotateY(-360deg) translatez(9px);
-moz-transform: rotateY(-360deg) translatez(9px);
-webkit-transform: rotateY(-360deg) translatez(9px);}
}
@keyframes rotar10 {
0%{ transform: rotateY(0deg) translatez(10px);
-moz-transform: rotateY(0deg) translatez(10px);
-webkit-transform: rotateY(0deg) translatez(10px);}
100%{ transform: rotateY(-360deg) translatez(10px);
-moz-transform: rotateY(-360deg) translatez(10px);
-webkit-transform: rotateY(-360deg) translatez(10px);}
}
@-moz-keyframes rotar10 {
0%{ transform: rotateY(0deg) translatez(10px);
-moz-transform: rotateY(0deg) translatez(10px);
-webkit-transform: rotateY(0deg) translatez(10px);}
100%{ transform: rotateY(-360deg) translatez(10px);
-moz-transform: rotateY(-360deg) translatez(10px);
-webkit-transform: rotateY(-360deg) translatez(10px);}
}
@-webkit-keyframes rotar10 {
0%{ transform: rotateY(0deg) translatez(10px);
-moz-transform: rotateY(0deg) translatez(10px);
-webkit-transform: rotateY(0deg) translatez(10px);}
100%{ transform: rotateY(-360deg) translatez(10px);
-moz-transform: rotateY(-360deg) translatez(10px);
-webkit-transform: rotateY(-360deg) translatez(10px);}
}
@keyframes rotar11 {
0%{ transform: rotateY(0deg) translatez(11px);
-moz-transform: rotateY(0deg) translatez(11px);
-webkit-transform: rotateY(0deg) translatez(11px);}
100%{ transform: rotateY(-360deg) translatez(11px);
-moz-transform: rotateY(-360deg) translatez(11px);
-webkit-transform: rotateY(-360deg) translatez(11px);}
}
@-moz-keyframes rotar11 {
0%{ transform: rotateY(0deg) translatez(11px);
-moz-transform: rotateY(0deg) translatez(11px);
-webkit-transform: rotateY(0deg) translatez(11px);}
100%{ transform: rotateY(-360deg) translatez(11px);
-moz-transform: rotateY(-360deg) translatez(11px);
-webkit-transform: rotateY(-360deg) translatez(11px);}
}
@-webkit-keyframes rotar11 {
0%{ transform: rotateY(0deg) translatez(11px);
-moz-transform: rotateY(0deg) translatez(11px);
-webkit-transform: rotateY(0deg) translatez(11px);}
100%{ transform: rotateY(-360deg) translatez(11px);
-moz-transform: rotateY(-360deg) translatez(11px);
-webkit-transform: rotateY(-360deg) translatez(11px);}
}
@keyframes rotar12 {
0%{ transform: rotateY(0deg) translatez(12px);
-moz-transform: rotateY(0deg) translatez(12px);
-webkit-transform: rotateY(0deg) translatez(12px);}
100%{ transform: rotateY(-360deg) translatez(12px);
-moz-transform: rotateY(-360deg) translatez(12px);
-webkit-transform: rotateY(-360deg) translatez(12px);}
}
@-moz-keyframes rotar12 {
0%{ transform: rotateY(0deg) translatez(12px);
-moz-transform: rotateY(0deg) translatez(12px);
-webkit-transform: rotateY(0deg) translatez(12px);}
100%{ transform: rotateY(-360deg) translatez(12px);
-moz-transform: rotateY(-360deg) translatez(12px);
-webkit-transform: rotateY(-360deg) translatez(12px);}
}
@-webkit-keyframes rotar12 {
0%{ transform: rotateY(0deg) translatez(12px);
-moz-transform: rotateY(0deg) translatez(12px);
-webkit-transform: rotateY(0deg) translatez(12px);}
100%{ transform: rotateY(-360deg) translatez(12px);
-moz-transform: rotateY(-360deg) translatez(12px);
-webkit-transform: rotateY(-360deg) translatez(12px);}
}
@keyframes rotar13 {
0%{ transform: rotateY(0deg) translatez(13px);
-moz-transform: rotateY(0deg) translatez(13px);
-webkit-transform: rotateY(0deg) translatez(13px);}
100%{ transform: rotateY(-360deg) translatez(13px);
-moz-transform: rotateY(-360deg) translatez(13px);
-webkit-transform: rotateY(-360deg) translatez(13px);}
}
@-moz-keyframes rotar13 {
0%{ transform: rotateY(0deg) translatez(13px);
-moz-transform: rotateY(0deg) translatez(13px);
-webkit-transform: rotateY(0deg) translatez(13px);}
100%{ transform: rotateY(-360deg) translatez(13px);
-moz-transform: rotateY(-360deg) translatez(13px);
-webkit-transform: rotateY(-360deg) translatez(13px);}
}
@-webkit-keyframes rotar13 {
0%{ transform: rotateY(0deg) translatez(13px);
-moz-transform: rotateY(0deg) translatez(13px);
-webkit-transform: rotateY(0deg) translatez(13px);}
100%{ transform: rotateY(-360deg) translatez(13px);
-moz-transform: rotateY(-360deg) translatez(13px);
-webkit-transform: rotateY(-360deg) translatez(13px);}
}
@keyframes rotar14 {
0%{ transform: rotateY(0deg) translatez(14px);
-moz-transform: rotateY(0deg) translatez(14px);
-webkit-transform: rotateY(0deg) translatez(14px);}
100%{ transform: rotateY(-360deg) translatez(14px);
-moz-transform: rotateY(-360deg) translatez(14px);
-webkit-transform: rotateY(-360deg) translatez(14px);}
}
@-moz-keyframes rotar14 {
0%{ transform: rotateY(0deg) translatez(14px);
-moz-transform: rotateY(0deg) translatez(14px);
-webkit-transform: rotateY(0deg) translatez(14px);}
100%{ transform: rotateY(-360deg) translatez(14px);
-moz-transform: rotateY(-360deg) translatez(14px);
-webkit-transform: rotateY(-360deg) translatez(14px);}
}
@-webkit-keyframes rotar14 {
0%{ transform: rotateY(0deg) translatez(14px);
-moz-transform: rotateY(0deg) translatez(14px);
-webkit-transform: rotateY(0deg) translatez(14px);}
100%{ transform: rotateY(-360deg) translatez(14px);
-moz-transform: rotateY(-360deg) translatez(14px);
-webkit-transform: rotateY(-360deg) translatez(14px);}
}
@keyframes rotar15 {
0%{ transform: rotateY(0deg) translatez(15px);
-moz-transform: rotateY(0deg) translatez(15px);
-webkit-transform: rotateY(0deg) translatez(15px);}
100%{ transform: rotateY(-360deg) translatez(15px);
-moz-transform: rotateY(-360deg) translatez(15px);
-webkit-transform: rotateY(-360deg) translatez(15px);}
}
@-moz-keyframes rotar15 {
0%{ transform: rotateY(0deg) translatez(15px);
-moz-transform: rotateY(0deg) translatez(15px);
-webkit-transform: rotateY(0deg) translatez(15px);}
100%{ transform: rotateY(-360deg) translatez(15px);
-moz-transform: rotateY(-360deg) translatez(15px);
-webkit-transform: rotateY(-360deg) translatez(15px);}
}
@-webkit-keyframes rotar15 {
0%{ transform: rotateY(0deg) translatez(15px);
-moz-transform: rotateY(0deg) translatez(15px);
-webkit-transform: rotateY(0deg) translatez(15px);}
100%{ transform: rotateY(-360deg) translatez(15px);
-moz-transform: rotateY(-360deg) translatez(15px);
-webkit-transform: rotateY(-360deg) translatez(15px);}
}
@keyframes rotar16 {
0%{ transform: rotateY(0deg) translatez(16px);
-moz-transform: rotateY(0deg) translatez(16px);
-webkit-transform: rotateY(0deg) translatez(16px);}
100%{ transform: rotateY(-360deg) translatez(16px);
-moz-transform: rotateY(-360deg) translatez(16px);
-webkit-transform: rotateY(-360deg) translatez(16px);}
}
@-moz-keyframes rotar16 {
0%{ transform: rotateY(0deg) translatez(16px);
-moz-transform: rotateY(0deg) translatez(16px);
-webkit-transform: rotateY(0deg) translatez(16px);}
100%{ transform: rotateY(-360deg) translatez(16px);
-moz-transform: rotateY(-360deg) translatez(16px);
-webkit-transform: rotateY(-360deg) translatez(16px);}
}
@-webkit-keyframes rotar16 {
0%{ transform: rotateY(0deg) translatez(16px);
-moz-transform: rotateY(0deg) translatez(16px);
-webkit-transform: rotateY(0deg) translatez(16px);}
100%{ transform: rotateY(-360deg) translatez(16px);
-moz-transform: rotateY(-360deg) translatez(16px);
-webkit-transform: rotateY(-360deg) translatez(16px);}
}
@keyframes rotar17 {
0%{ transform: rotateY(0deg) translatez(17px);
-moz-transform: rotateY(0deg) translatez(17px);
-webkit-transform: rotateY(0deg) translatez(17px);}
100%{ transform: rotateY(-360deg) translatez(17px);
-moz-transform: rotateY(-360deg) translatez(17px);
-webkit-transform: rotateY(-360deg) translatez(17px);}
}
@-moz-keyframes rotar17 {
0%{ transform: rotateY(0deg) translatez(17px);
-moz-transform: rotateY(0deg) translatez(17px);
-webkit-transform: rotateY(0deg) translatez(17px);}
100%{ transform: rotateY(-360deg) translatez(17px);
-moz-transform: rotateY(-360deg) translatez(17px);
-webkit-transform: rotateY(-360deg) translatez(17px);}
}
@-webkit-keyframes rotar17 {
0%{ transform: rotateY(0deg) translatez(17px);
-moz-transform: rotateY(0deg) translatez(17px);
-webkit-transform: rotateY(0deg) translatez(17px);}
100%{ transform: rotateY(-360deg) translatez(17px);
-moz-transform: rotateY(-360deg) translatez(17px);
-webkit-transform: rotateY(-360deg) translatez(17px);}
}
@keyframes rotar18 {
0%{ transform: rotateY(0deg) translatez(18px);
-moz-transform: rotateY(0deg) translatez(18px);
-webkit-transform: rotateY(0deg) translatez(18px);}
100%{ transform: rotateY(-360deg) translatez(18px);
-moz-transform: rotateY(-360deg) translatez(18px);
-webkit-transform: rotateY(-360deg) translatez(18px);}
}
@-moz-keyframes rotar18 {
0%{ transform: rotateY(0deg) translatez(18px);
-moz-transform: rotateY(0deg) translatez(18px);
-webkit-transform: rotateY(0deg) translatez(18px);}
100%{ transform: rotateY(-360deg) translatez(18px);
-moz-transform: rotateY(-360deg) translatez(18px);
-webkit-transform: rotateY(-360deg) translatez(18px);}
}
@-webkit-keyframes rotar18 {
0%{ transform: rotateY(0deg) translatez(18px);
-moz-transform: rotateY(0deg) translatez(18px);
-webkit-transform: rotateY(0deg) translatez(18px);}
100%{ transform: rotateY(-360deg) translatez(18px);
-moz-transform: rotateY(-360deg) translatez(18px);
-webkit-transform: rotateY(-360deg) translatez(18px);}
}
@keyframes rotar19 {
0%{ transform: rotateY(0deg) translatez(19px);
-moz-transform: rotateY(0deg) translatez(19px);
-webkit-transform: rotateY(0deg) translatez(19px);}
100%{ transform: rotateY(-360deg) translatez(19px);
-moz-transform: rotateY(-360deg) translatez(19px);
-webkit-transform: rotateY(-360deg) translatez(19px);}
}
@-moz-keyframes rotar19 {
0%{ transform: rotateY(0deg) translatez(19px);
-moz-transform: rotateY(0deg) translatez(19px);
-webkit-transform: rotateY(0deg) translatez(19px);}
100%{ transform: rotateY(-360deg) translatez(19px);
-moz-transform: rotateY(-360deg) translatez(19px);
-webkit-transform: rotateY(-360deg) translatez(19px);}
}
@-webkit-keyframes rotar19 {
0%{ transform: rotateY(0deg) translatez(19px);
-moz-transform: rotateY(0deg) translatez(19px);
-webkit-transform: rotateY(0deg) translatez(19px);}
100%{ transform: rotateY(-360deg) translatez(19px);
-moz-transform: rotateY(-360deg) translatez(19px);
-webkit-transform: rotateY(-360deg) translatez(19px);}
}
@keyframes rotar20 {
0%{ transform: rotateY(0deg) translatez(20px);
-moz-transform: rotateY(0deg) translatez(20px);
-webkit-transform: rotateY(0deg) translatez(20px);}
100%{ transform: rotateY(-360deg) translatez(20px);
-moz-transform: rotateY(-360deg) translatez(20px);
-webkit-transform: rotateY(-360deg) translatez(20px);}
}
@-moz-keyframes rotar20 {
0%{ transform: rotateY(0deg) translatez(20px);
-moz-transform: rotateY(0deg) translatez(20px);
-webkit-transform: rotateY(0deg) translatez(20px);}
100%{ transform: rotateY(-360deg) translatez(20px);
-moz-transform: rotateY(-360deg) translatez(20px);
-webkit-transform: rotateY(-360deg) translatez(20px);}
}
@-webkit-keyframes rotar20 {
0%{ transform: rotateY(0deg) translatez(20px);
-moz-transform: rotateY(0deg) translatez(20px);
-webkit-transform: rotateY(0deg) translatez(20px);}
100%{ transform: rotateY(-360deg) translatez(20px);
-moz-transform: rotateY(-360deg) translatez(20px);
-webkit-transform: rotateY(-360deg) translatez(20px);}
}
@keyframes rotar21 {
0%{ transform: rotateY(0deg) translatez(21px);
-moz-transform: rotateY(0deg) translatez(21px);
-webkit-transform: rotateY(0deg) translatez(21px);}
100%{ transform: rotateY(-360deg) translatez(21px);
-moz-transform: rotateY(-360deg) translatez(21px);
-webkit-transform: rotateY(-360deg) translatez(21px);}
}
@-moz-keyframes rotar21 {
0%{ transform: rotateY(0deg) translatez(21px);
-moz-transform: rotateY(0deg) translatez(21px);
-webkit-transform: rotateY(0deg) translatez(21px);}
100%{ transform: rotateY(-360deg) translatez(21px);
-moz-transform: rotateY(-360deg) translatez(21px);
-webkit-transform: rotateY(-360deg) translatez(21px);}
}
@-webkit-keyframes rotar21 {
0%{ transform: rotateY(0deg) translatez(21px);
-moz-transform: rotateY(0deg) translatez(21px);
-webkit-transform: rotateY(0deg) translatez(21px);}
100%{ transform: rotateY(-360deg) translatez(21px);
-moz-transform: rotateY(-360deg) translatez(21px);
-webkit-transform: rotateY(-360deg) translatez(21px);}
}
@keyframes sube{
0%{margin:152px 212px;}
100%{margin:121px 212px;}
}
@-moz-keyframes sube{
0%{margin:152px 212px;}
100%{margin:121px 212px;}
}
@-webkit-keyframes sube{
0%{margin:152px 212px;}
100%{margin:121px 212px;}
}
@keyframes sube3{
0%{margin:330px 251px;width:3px; height:3px}
100%{margin:300px 251px;width:3px; height:70px}
}
@-moz-keyframes sube3{
0%{margin:330px 251px;width:3px; height:3px}
100%{margin:300px 251px;width:3px; height:70px}
}
@-webkit-keyframes sube3{
0%{margin:330px 251px;width:3px; height:3px}
100%{margin:300px 251px;width:3px; height:70px}
}
@keyframes sube5{
0%{margin:321px 241px;width:3px; height:30px}
100%{margin:312px 241px;width:3px; height:12px}
}
@-moz-keyframes sube5{
0%{margin:321px 241px;width:3px; height:30px}
100%{margin:312px 241px;width:3px; height:12px}
}
@-webkit-keyframes sube5{
0%{margin:321px 241px;width:3px; height:30px}
100%{margin:312px 241px;width:3px; height:12px}
}
@keyframes sube7 {
0%{margin:330px 231px;width:3px; height:30px}
100%{margin:300px 231px;width:3px; height:50px}
}
@-moz-keyframes sube7 {
0%{margin:330px 231px;width:3px; height:30px}
100%{margin:300px 231px;width:3px; height:50px}
}
@-webkit-keyframes sube7 {
0%{margin:330px 231px;width:3px; height:30px}
100%{margin:300px 231px;width:3px; height:50px}
}
@keyframes sube9 {
0%{margin:152px 70px;}
100%{margin:231px 70px;}
}
@-moz-keyframes sube9 {
0%{margin:152px 70px;}
100%{margin:231px 70px;}
}
@-webkit-keyframes sube9 {
0%{margin:152px 70px;}
100%{margin:231px 70px;}
}
@keyframes sube12 {
0%{margin:231px 370px;}
100%{margin:152px 370px;}
}
@-moz-keyframes sube12 {
0%{margin:231px 370px;}
100%{margin:152px 370px;}
}
@-webkit-keyframes sube12 {
0%{margin:231px 370px;}
100%{margin:152px 370px;}
}
