HTML
<div class="contenedor">
<div class="cat2"><div class="cola3"></div><div class="legs7"></div><div class="bodys"><div class="body3"><div class="legs9"></div></div><div class="orejas7"></div></div><div class="head3"><div class="ojos7"></div></div><div class="bocas"><div class="bigotes7"></div><div class="bigotes9"></div><div class="boca"></div><div class="nariz3"></div></div></div>
</div>
CSS
body{
background:black;
}
.contenedor {
position:relative;
width:350px;
height:350px;
border-radius:100%;
background:#283144;
margin:231px auto;
}
.cat1{
posiiton:absolute;
margin:-9px -25px;
}
.body{
position:absolute;
width:112px;
height:172px;
border-radius:100%;
background:#ccc;
border:2px solid gray;
margin:40px 132px;
}
.head{
position:absolute;
display:block;
width: 142px;
height: 142px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ccc;
border:2px solid gray;
margin:132px 121px;
overflow:hidden;
animation:sube3 .3s alternate infinite;
-moz-animation:sube3 .3s alternate infinite;
-webkit-animation:sube3 .3s alternate infinite;
}
.ojos{
position:absolute;
width: 43px;
height: 43px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:white;
border:1px solid black;
margin:80px 12px;
transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);
}
.ojos::before{
content:"";
display:block;
width:30px;
height:30px;
border-radius:100%;
background:black;
margin:13px 12px
}
.ojos3{
position:absolute;
width: 43px;
height: 43px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:white;
border:1px solid black;
margin:80px 85px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);
z-index:333
}
.ojos3::before{
content:"";
display:block;
width:30px;
height:30px;
border-radius:100%;
background:black;
margin:13px 2px
}
.ojos3::after{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin:-40px 12px;
}
.ojos::after{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin:-40px 21px;
}
.nariz{
position:absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid black;
border-radius: 100px / 50px;
margin:121px 60px
}
.bigotes{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:225px 102px;
animation:sube3 .3s alternate infinite;
-moz-animation:sube3 .3s alternate infinite;
-webkit-animation:sube3 .3s alternate infinite;
}
.bigotes::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:12px 7px
}
.bigotes::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:16px 9px
}
.bigotes3{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:225px 192px;
animation:sube3 .3s alternate infinite;
-moz-animation:sube3 .3s alternate infinite;
-webkit-animation:sube3 .3s alternate infinite;
}
.bigotes3::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:12px 12px
}
.bigotes3::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:16px 9px
}
.orejitas{
position:absolute;
margin:0 0;
animation:sube .3s alternate infinite;
-moz-animation:sube .3s alternate infinite;
-webkit-animation:sube .3s alternate infinite;
}
.orejas{
position:absolute;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 80px solid #ccc;
border-radius: 100px / 50px;
margin:121px 76px;
transform:rotate(121deg);
-moz-transform:rotate(121deg);
-webkit-transform:rotate(121deg);
}
.orejas::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 80px solid #ccc;
border-radius: 100px / 50px;
margin:-221px -121px;
transform:rotate(121deg);
-moz-transform:rotate(121deg);
-webkit-transform:rotate(121deg);
}
.orejas3{
position:absolute;
width:70px;
height:30px;
border-radius:100%;
background:gray;
border:3px solid #ccc;
transform:rotate(35deg);
-moz-transform:rotate(35deg);
-webkit-transform:rotate(35deg);
margin:150px 63px
}
.orejas3::before{
content:"";
position:absolute;
width:70px;
height:30px;
border-radius:100%;
background:gray;
border:3px solid #ccc;
transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
margin:-107px 147px
}
.legs{
position:absolute;
width:30px;
height:90px;
border-radius:21px;
background:#ccc;
border:2px solid gray;
margin:60px -65px;
transform:rotate(21deg);
-moz-transform:rotate(21deg);
-webkit-transform:rotate(21deg);
}
.legs::before{
content:"";
position:absolute;
width:30px;
height:90px;
border-radius:21px;
background:#ccc;
border:2px solid gray;
margin:-35px 85px;
transform:rotate(-42deg);
-moz-transform:rotate(-42deg);
-webkit-transform:rotate(-42deg);
}
.legs3{
position:absolute;
width:40px;
height:21px;
border-radius:30px 30px 0 0;
background:gray;
margin:251px 132px
}
.legs3::before{
content:"";
position:absolute;
width:40px;
height:21px;
border-radius:30px 30px 0 0;
background:gray;
margin:0px 80px
}
.ton{
position:absolute;
width:21px;
height:30px;
border-radius:21px;
background:#Ff6666;
margin:261px 182px;
animation:sube .3s alternate infinite;
-moz-animation:sube .3s alternate infinite;
-webkit-animation:sube .3s alternate infinite;
}
.ton::before{
content:"";
display:block;
width:1px;
height:30px;
background:#333;
margin:-3px 10px
}
.ca{
position:absolute;
width:112px;
height:40px;
border-radius:100%;
background:white;
border:9px solid black;
margin:261px 102px
}
.cola{
position:absolute;
width:132px;
height:90px;
border-radius:100%;
border-bottom:33px solid gray;
margin:-3px 192px;
animation:sube .3s alternate infinite;
-moz-animation:sube .3s alternate infinite;
-webkit-animation:sube .3s alternate infinite;
}
.cat2{
position:absolute;
margin:0 -30px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.head3{
position:absolute;
display:block;
width: 132px;
height: 121px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ccc;
border:2px solid gray;
margin: 73px 90px;
animation:sube21 2.1s alternate infinite;
-moz-animation:sube21 2.1s alternate infinite;
-webkit-animation:sube21 2.1s alternate infinite;
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}
.ojos7{
position:absolute;
width:33px;
height:43px;
border-radius:100%;
border-right:3px solid black;
margin:24px 12px;
transform:rotate-(-55deg);
-moz-transform:rotate(-55deg);
-webkit-transform:rotate(-55deg);
}
.ojos7::before{
content:"";
position:absolute;
width:33px;
height:43px;
border-radius:100%;
border-left:3px solid black;
margin:55px 43px;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.bocas{
position:absolute;
margin:12px 7px;
animation:sube12 2.1s alternate infinite;
-moz-animation:sube12 2.1s alternate infinite;
-webkit-animation:sube12 2.1s alternate infinite;
}
.nariz3{
position:absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid black;
border-radius: 100px / 50px;
margin:112px 137px;
transform:rotate-(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
}
.boca{
position:absolute;
width:21px;
height:21px;
border-radius:0 0 30px 30px;
background:#ff6666;
transform:rotate-(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
margin:127px 146px;
}
.boca::before{
content:"";
display:block;
width:45px;
height:45px;
border-radius:100%;
background:#ddd;
border-right:2px solid gray;
margin:-19px -35px
}
.boca::after{
content:"";
display:block;
width:45px;
height:45px;
border-radius:100%;
background:#ddd;
border-left:2px solid gray;
margin:-43px 10px
}
.orejas7{
position:absolute;
width:70px;
height:90px;
border-radius:50px 500px 50px 500px;
background:#94948c;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
margin:60px 50px;
border-left: 7px solid #d9d9d3;
border-top: 7px solid #d9d9d3;
border-right:3px solid #d9d9d3;
border-bottom:3px solid #d9d9d3;
}
.orejas7::before{
content:"";
position:absolute;
width:70px;
height:90px;
border-radius:50px 500px 50px 500px;
background:#94948c;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
margin:-50px 93px;
border-right: 3px solid #d9d9d3;
border-top: 7px solid #d9d9d3;
border-left:7px solid #d9d9d3;
border-bottom:3px solid #d9d9d3;
}
.bodys{
position:absolute;
margin:0 0;
animation:sube12 2.1s alternate infinite;
-moz-animation:sube12 2.1s alternate infinite;
-webkit-animation:sube12 2.1s alternate infinite;
}
.body3{
position:absolute;
display:block;
width:112px;
height: 132px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#d9d9d3;
border-top:2px solid gray;
border-left:2px solid gray;
border-right:2px solid gray;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
margin:162px 121px;
}
.legs7{
position:absolute;
width:132px;
height:90px;
border-radius:100%;
background:#d9d9d3;
border:2px solid gray;
margin:241px 121px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.legs7::before{
content:"";
display:block;
width: 35px;
height: 60px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ddd;
border:2px solid gray;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
margin:21px -12px;
}
.legs7::after{
content:"";
display:block;
width: 35px;
height: 60px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ddd;
border:2px solid gray;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
margin:-75px 102px;
}
.legs9{
position:absolute;
width:35px;
height:50px;
border-radius:90px;
background:#ddd;
border-top:2px solid gray;
border-left:2px solid gray;
border-right:2px solid gray;
border-bottom:12px solid gray;
margin:21px -12px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.legs9::before{
content:"";
position:absolute;
width:35px;
height:50px;
border-radius:90px;
background:#ddd;
border-top:2px solid gray;
border-left:2px solid gray;
border-right:2px solid gray;
border-bottom:12px solid gray;
margin:21px 89px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
.bigotes7{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:123px 43px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.bigotes7::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:13px 7px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.bigotes7::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:16px 9px;
-webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
transform: rotate(-21deg);
}
.bigotes9{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:90px 162px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.bigotes9::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:13px 17px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
}
.bigotes9::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:17px 21px;
-webkit-transform: rotate(21deg);
-moz-transform: rotate(21deg);
transform: rotate(21deg);
}
.cola3{
position:absolute;
width:30px;
height:90px;
border-radius:30px;
background:gray;
margin:321px 192px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.cat3{
position:absolute;
margin:-43px -45px
}
.head7{
position:absolute;
display:block;
width: 142px;
height: 135px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ccc;
border:2px solid gray;
margin:55px 85px;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation: sube3 .9s alternate infinite;
}
.ore{
position:absolute;
width:70px;
height:90px;
border-radius:50px 500px 50px 500px;
background:#94948c;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
margin:50px 60px;
border:7px solid #d9d9d3;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.ore3{
position:absolute;
width:70px;
height:90px;
border-radius:500px 50px 500px 50px;
background:#94948c;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
margin:50px 168px;
border: 7px solid #d9d9d3;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.eyes{
position:absolute;
width: 43px;
height: 43px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:white;
border:1px solid black;
margin:50px 12px;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.eyes::before{
content:"";
display:block;
width:35px;
height:35px;
border-radius:100%;
background:black;
margin:9px 3px
}
.eyes::after{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin:-25px 21px;
}
.eyes3{
position:absolute;
width: 43px;
height: 43px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:white;
border:1px solid black;
margin:50px 85px;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.eyes3::before{
content:"";
display:block;
width:35px;
height:35px;
border-radius:100%;
background:black;
margin:9px 5px
}
.eyes3::after{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin:-25px 12px;
}
.nose{
position:absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid black;
border-radius: 100px / 50px;
margin:87px 62px;
z-index:3335;
}
.bocas3{
position:absolute;
width:21px;
height:21px;
border-radius:0 0 30px 30px;
background:#ff6666;
border:5px solid gray;
margin:95px 57px;
animation:va .9s alternate infinite;
-moz-animation:va .9s alternate infinite;
-webkit-animation:va .9s alternate infinite;
}
.boqui{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#ddd;
border-right:2px solid gray;
margin:85px 35px
}
.boqui::before{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#ddd;
border-left:2px solid gray;
margin:0px 35px
}
.body9{
position:absolute;
display:block;
width: 182px;
height:112px;
background:#ccc;
border-radius: 30px 300px 300px 300px;
border-bottom:2px solid gray;
margin:162px 132px;
}
.leg3{
position:absolute;
display:block;
width: 75px;
height: 90px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#ccc;
border-top:2px solid gray;
-webkit-transform: rotate(-201deg);
-moz-transform: rotate(-201deg);
transform: rotate(-201deg);
margin:201px 235px
}
.leg3::before{
content:"";
display:block;
width:90px;
height:40px;
border-radius:30px;
background:#ccc;
border-right:21px solid gray;
-webkit-transform: rotate(-53deg);
-moz-transform: rotate(-53deg);
transform: rotate(-53deg);
margin:-33px -12px
}
.leg6{
position:absolute;
display:block;
width: 75px;
height: 80px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#B5B5B5;
-webkit-transform: rotate(-201deg);
-moz-transform: rotate(-201deg);
transform: rotate(-201deg);
margin:212px 231px
}
.leg6::before{
content:"";
display:block;
width:90px;
height:40px;
border-radius:30px;
background:#B5B5B5;
border-right:21px solid gray;
-webkit-transform: rotate(-53deg);
-moz-transform: rotate(-53deg);
transform: rotate(-53deg);
margin:-33px -9px
}
.leg9{
position:absolute;
width:35px;
height:102px;
border-radius:30px;
background:#ccc;
border-bottom:21px solid gray;
margin:246px 162px;
webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
animation:sube37 .3s alternate infinite;
-moz-animation:sube37 .3s alternate infinite;
-webkit-animation: sube37 .3s alternate infinite;
}
.leg7{
position:absolute;
width:35px;
height:102px;
border-radius:30px;
background: #B5B5B5;
margin:231px 142px;
border-bottom:21px solid gray;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
animation:sube35 .3s alternate infinite;
-moz-animation:sube35 .3s alternate infinite;
-webkit-animation: sube35 .3s alternate infinite;
}
.bigotitos{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:75px -12px;
animation:sube30 .9s alternate infinite;
-moz-animation:sube30 .9s alternate infinite;
-webkit-animation:sube30 .9s alternate infinite;
}
.bigotitos::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:13px 7px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.bigotitos::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:18px 9px;
-webkit-transform: rotate(-21deg);
-moz-transform: rotate(-21deg);
transform: rotate(-21deg);
}
.bigotitos3{
position:absolute;
width:90px;
height:30px;
border-radius:100%;
border-bottom:2px solid black;
margin:75px 60px;
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube30 .9s alternate infinite;
}
.bigotitos3::before{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:12px 12px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg);
}
.bigotitos3::after{
content:"";
position:absolute;
width:70px;
height:21px;
border-radius:100%;
border-bottom:2px solid black;
margin:16px 13px;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
transform: rotate(25deg);
}
.colas{
position:absolute;
width:132px;
height:90px;
border-radius:100%;
border-bottom:33px solid gray;
margin:112px 271px;
animation:sube .9s alternate infinite;
-moz-animation:sube .9s alternate infinite;
-webkit-animation:sube .9s alternate infinite;
}
@keyframes sube{
0%{transform:translatey(0px);}
100%{transform:translatey(-5px);}
}
@keyframes sube3{
0%{transform:translatey(-3px);}
100%{transform:translatey(0px);}
}
@keyframes sube12{
0%{transform:translatey(0px);}
100%{transform:translatey(-9px);}
}
@keyframes sube7{
0%{margin:121px 76px;}
100%{margin:112px 76px;}
}
@keyframes sube21 {
0%{margin: 70px 90px;}
100%{margin: 65px 90px;}
}
@keyframes sube6 {
0%{margin:221px 121px;}
100%{margin:231px 121px;}
}
@keyframes abre{
0%,25%,65%,75%.100%{opacity:1}
50%{opacity:0;}
}
@keyframes rotar{
0%{-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
transform: rotate(12deg); }
100%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg); }
}
@keyframes rotar3 {
0%{-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
transform: rotate(65deg); }
100%{--webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
transform: rotate(75deg); }
}
@keyframes va{
0%{transform:scale(0.5)}
100%{transform:scale(1)}
}
@keyframes sube37{
0%{ margin:245px 162px;}
100%{ margin:231px 162px;}
}
@keyframes sube35{
0%{margin:231px 142px;}
100%{margin:245px 142px;}
}
