Sleepy Kitty (Only CSS)

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;} }
JAVASCRIPT
Expand for more options Login