Sad kitty

Developer
Judith Neumann
Size
2,643 Kb
Views
44,528
  1. Sad kitty Previews
  2. Sad kitty HTML Codes
  3. Sad kitty CSS Codes

How do I make an sad kitty?

Only css. What is a sad kitty? How do you make a sad kitty? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.

Sad kitty Previews
IQ Test

Sad kitty - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sad kitty</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contenedor"> <div class="cat"> <div class="cola"></div> <div class="legs3"></div> <div class="legs7"></div> <div class="body"><div class="legs"><div class="legs9"></div></div></div> <div class="orejas"></div> <div class="orejas3"></div> <div class="cara">
<div class="ojos"><div class="iris"></div></div>
<div class="ojos3"><div class="iris3"></div></div> <div class="ceja"></div> <div class="ceja3"></div> <div class="bigotitos"></div> <div class="bigotitos3"></div> <div class="boca"></div> <div class="hocico3"></div> <div class="hocico"></div> </div>
</div>
</div>
</body>
</html>

Sad kitty - Script Codes CSS Codes

body{ background:black;
}
.contenedor{ position:relative; width:600px; height:600px; background:#041238; border-radius:100%; margin:121px auto;
}
.cat{ position:absolute; margin:0 -9px
}
.cara{ position:absolute; width: 172px; height: 162px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:gray; border:3px solid #777; margin:125px 231px; -webkit-animation:sube 3s alternate infinite; animation:sube 3s alternate infinite;
}
.ojos { position:absolute; width:50px; height:50px; border-radius:100%; background:black; margin:70px 21px; -webkit-animation:cerrar 3s alternate infinite; animation:cerrar 3s alternate infinite;
}
.ojos3 { position:absolute; width:50px; height:50px; border-radius:100%; background:black; margin:70px 102px; -webkit-animation:cerrar 3s alternate infinite; animation:cerrar 3s alternate infinite;
}
.iris{ position:absolute; width:12px; height:12px; border-radius:100%; background:white; margin:12px 12px; -webkit-animation:shake .09s alternate infinite; animation:shake .09s alternate infinite;
}
.iris3{ position:absolute; width:12px; height:12px; border-radius:100%; background:white; margin:12px 25px; -webkit-animation:shake .09s alternate infinite; animation:shake .09s alternate infinite;
}
.ceja{ position:absolute; width:60px; height:35px; border-radius:100%; background:gray; margin:43px 7px; -webkit-transform:rotate(-33deg); transform:rotate(-33deg)
}
.ceja3{ position:absolute; width:60px; height:35px; border-radius:100%;
background:gray; margin:43px 98px; -webkit-transform:rotate(33deg); transform:rotate(33deg)
}
.boca{ position:absolute; width:30px; height:21px; border-radius:100%; background: #333; margin:121px 72px; -webkit-animation:baja 3s alternate infinite; animation:baja 3s alternate infinite;
}
.hocico{ position:absolute; height: 0; border-left: 21px solid transparent; border-right: 21px solid transparent; border-bottom: 21px solid #121212; border-radius: 100px / 50px; margin:112px 65px; -webkit-animation:sube 3s alternate infinite; animation:sube 3s alternate infinite;
}
.hocico3{ position:absolute; width:35px; height:30px; border-radius:100%; border-right:3px solid black; background:#94948c; margin:123px 50px; -webkit-animation:sube 3s alternate infinite; animation:sube 3s alternate infinite;
}
.hocico3::before{ content:""; position:absolute; width:35px; height:30px; border-radius:100%; border-left:3px solid black; background:#94948c; margin:0px 35px
}
.orejas{ position:absolute; width:70px; height:90px; border-radius:500px 50px 500px 50px; background:#94948c; border:6px solid gray; margin:95px 201px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);
-webkit-animation:sube3 3s alternate infinite; animation:sube3 3s alternate infinite;
}
.orejas3{ position:absolute; width:70px; height:90px; border-radius:50px 500px 50px 500px; background:#94948c; border:6px solid gray; margin:95px 350px; -webkit-transform:rotate(45deg); transform:rotate(45deg);
-webkit-animation:sube3 3s alternate infinite; animation:sube3 3s alternate infinite;
}
.body{ position:absolute; width: 162px; height: 212px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:gray; border:3px solid #777; margin:251px 231px;
}
.legs{ position:absolute; width:35px; height:132px; border-radius:21px; background:gray; border:3px solid #777; margin:90px 7px; -webkit-transform:rotate(12deg); transform:rotate(12deg)
}
.legs::before{ content:""; position:absolute; width:35px; height:132px; border-radius:21px; background:gray; border:3px solid #777; margin:-24px 102px; -webkit-transform:rotate(-24deg); transform:rotate(-24deg)
}
.legs3{ position:absolute; width:90px; height:75px; border-radius:70px 70px 0 0; background:gray; border:3px solid #777; margin:360px 212px
}
.legs3::before{ content:""; display:block; width:121px; height:30px; border-radius:30px; background:gray; border-left:3px solid #777; border-bottom:3px solid #777; margin:70px -21px
}
.legs7{ position:absolute; width:90px; height:75px; border-radius:70px 70px 0 0; background:gray; border:3px solid #777; margin:360px 321px
}
.legs7::before{ content:""; display:block; width:121px; height:30px; border-radius:30px; background:gray; border-right:3px solid #777; border-bottom:3px solid #777; margin:70px -21px
}
.legs9{ position:absolute; width:40px; height:21px; border-radius:12px; background:gray; border:3px solid #777; margin:112px -5px;
-webkit-transform:rotate(-12deg); transform:rotate(-12deg)
}
.legs9::before{ content:""; position:absolute; width:40px; height:21px; border-radius:12px; background:gray; border:3px solid #777; margin:0px 132px;
}
.bigotitos{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:107px -12px; -webkit-animation:sube 3s alternate infinite; animation:sube 3s 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); 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); transform: rotate(-21deg);
}
.bigotitos3{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:107px 90px; -webkit-animation:sube 3s alternate infinite; animation:sube 3s 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); 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); transform: rotate(25deg);
}
.cola{ position:absolute; width:172px; height:121px; border-radius:100%; border-bottom:35px solid gray; margin:300px 360px; -webkit-animation:go 3s alternate infinite; animation:go 3s alternate infinite;
}
@-webkit-keyframes shake{ 0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(.90);transform:scale(.90)} 75%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes shake{ 0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(.90);transform:scale(.90)} 75%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes sube { 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}
}
@keyframes sube { 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 100%{-webkit-transform:translatey(-7px);transform:translatey(-7px)}
}
@-webkit-keyframes baja { 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 100%{-webkit-transform:translatey(9px);transform:translatey(9px)}
}
@keyframes baja { 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 100%{-webkit-transform:translatey(9px);transform:translatey(9px)}
}
@-webkit-keyframes go{ 0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(.90);transform:scale(.90)}
}
@keyframes go{ 0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(.90);transform:scale(.90)}
}
@-webkit-keyframes cerrar { 0%,25%{opacity:1} 35%{opacity: 0} 50%{opacity:1;} 100%{opacity:1}
}
@keyframes cerrar { 0%,25%{opacity:1} 35%{opacity: 0} 50%{opacity:1;} 100%{opacity:1}
}
@-webkit-keyframes sube3 { 0%{margin-top:95px} 100%{margin-top:85px ;}
}
@keyframes sube3 { 0%{margin-top:95px} 100%{margin-top:85px ;}
}
Sad kitty - Script Codes
Sad kitty - Script Codes
Home Page Home
Developer Judith Neumann
Username judag
Uploaded October 13, 2022
Rating 4
Size 2,643 Kb
Views 44,528
Do you need developer help for Sad kitty?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Judith Neumann (judag) Script Codes
Name
Snow in town
Responsive flexbox letters...
Fantasy earth...
Antartic day
Crazy icons
Landscapes animated icons...
Css animals
Forest
Colorfull night...
Parrot preloader...
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!