Little black kittys
How do I make an little black kittys?
Only CSS with animations. What is a little black kittys? How do you make a little black kittys? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.
Little black kittys Previews
Little black kittys - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Little black kittys</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="contenedor">
<ul> <li><div class="gato"><div class="cola"></div><div class="cola3"></div><div class="body"><div class="legs"></div></div><div class="orejas"></div><div class="cat1"><div class="ojos"><div class="iris"></div><div class="iris3"></div></div><div class="boca3"></div><div class="boca"></div></div><div class="bigotes"></div><div class="bigotes3"></div><div class="brazos"></div><div class="brazos3"></div></div></li> <li><div class="gato"><div class="cola5"></div><div class="cola6"></div><div class="body"><div class="legs"></div></div><div class="orejas3"></div><div class="orejas4"></div><div class="cat1"><div class="ojos3"><div class="iris5"><div class="lag"></div></div><div class="iris6"><div class="lag3"></div></div></div><div class="boca5"></div><div class="boca"></div><div class="bigotes5"></div><div class="bigotes6"></div><div class="brazos5"></div><div class="brazos6"></div></div></div></li> <li><div class="gato"><div class="cola7"></div><div class="cola9"></div><div class="body"><div class="legs"></div></div><div class="cab"><div class="orejas7"></div><div class="cat2"><div class="ojos"><div class="iris"></div><div class="iris3"></div></div><div class="boca9"></div><div class="boca"></div><div class="bigotes5"></div><div class="bigotes6"></div></div></div><div class="brazos7"></div><div class="brazos9"></div></div></li> <li></li> <li></li> <li></li>
</ul>
</div>
</body>
</html>
Little black kittys - Script Codes CSS Codes
body{ background:black;
}
.contenedor{ position:relative; width:800px; height:600px; background:#ccc; margin:90px auto; padding-top:30px;
}
.gato{ position:absolute; margin:0 21px;
}
ul{ display:block; width:700px; height:500px; list-style:none; margin:30px 30px;
}
ul li{ display:inline-block; width: 201px; height:201px; margin: 152px 7px
}
.cat1, .cat2{ position:absolute; width: 90px; height: 80px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:black; }
.cat1{ margin:21px 30px
}
.cat2{ margin:21px 30px; -webkit-animation:rotar 3s alternate infinite; animation:rotar 3s alternate infinite; }
.orejas, .orejas3, .orejas4{ position:absolute; width:50px; height:40px; background:#212121; border:5px solid black; border-radius: 300px 3000px; }
.orejas{ -webkit-transform:rotate(21deg); transform:rotate(21deg); margin:7px 19px
}
.orejas3{ -webkit-transform:rotate(-33deg); transform:rotate(-33deg); margin:7px 14px; -webkit-animation: rot 3s alternate infinite; animation: rot 3s alternate infinite;
}
.orejas::before{ content:""; position:absolute; width:50px; height:40px; background:#212121; border:5px solid black; border-radius:3000px 300px; -webkit-transform:rotate(-42deg); transform:rotate(-42deg); margin:-25px 50px
}
.orejas4{ border-radius:3000px 300px; -webkit-transform:rotate(33deg); transform:rotate(33deg); margin:7px 84px; -webkit-animation: rot3 3s alternate infinite; animation: rot3 3s alternate infinite;
}
.cab{ position:absolute; -webkit-animation:rotar3 3s alternate infinite; animation:rotar3 3s alternate infinite;
}
.orejas7{ position:absolute; width:50px; height:40px; background:#212121; border:5px solid black; border-radius:300px 3000px; -webkit-transform:rotate(33deg); transform:rotate(33deg); margin:5px 25px
}
.orejas7::before{ content:""; position:absolute; width:50px; height:40px; background:#212121; border:5px solid black; border-radius:3000px 300px; -webkit-transform:rotate(-66deg); transform:rotate(-66deg); margin:-26px 35px
}
.ojos, .ojos3{ position:absolute; display:block; width: 30px; height: 25px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; }
.ojos{ margin:30px 7px; -webkit-transform:rotate(9deg); transform:rotate(9deg); -webkit-animation:abre 1.2s alternate infinite; animation:abre 1.2s alternate infinite;
}
.ojos::before, .ojos3::before{ content:""; position:absolute; display:block; width: 30px; height: 25px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; }
.ojos::before{ margin:-6px 46px; -webkit-transform:rotate(-18deg); transform:rotate(-18deg);
}
.ojos3::before{ margin:-6px 46px; -webkit-transform:rotate(-18deg); transform:rotate(-18deg);
}
.ojos3{ margin:30px 7px; -webkit-transform:rotate(9deg); transform:rotate(9deg); }
.iris,.iris3{ position:absolute; width:25px; height:21px; border-radius:100px; background:black; }
.iris{ margin:1px 2px
}
.iris3{ margin:-5px 48px
}
.iris::before, .iris3::before{ content:""; display:block; width:16px; height:8px; border-radius:16px 16px 0 0; border-top: 5px solid white; }
.iris::before{ -webkit-transform:rotate(-30deg); transform:rotate(-30deg); margin: 3px 3px;
}
.iris3::before{ -webkit-transform:rotate(30deg); transform:rotate(30deg); margin: 3px 7px;
}
.iris::after, .iris3::after{ content:""; display:block; width:12px; height:6px; border-radius:0 0 9px 9px; border-bottom: 5px solid gray; }
.iris::after{ -webkit-transform:rotate(-30deg); transform:rotate(-30deg); margin: -9px 9px;
}
.iris3::after{ -webkit-transform:rotate(30deg); transform:rotate(30deg); margin: -9px 4px;
}
.iris5,.iris6{ position:absolute; width:25px; height:21px; border-radius:100px; background:black; -webkit-animation:shake .012s alternate infinite; animation:shake .012s alternate infinite;
}
.iris5{ margin:1px 2px
}
.iris6{ margin:-5px 48px
}
.iris5::before, .iris6::before{ content:""; display:block; width:16px; height:8px; border-radius:16px 16px 0 0; border-top: 5px solid white;
}
.iris5::before{ -webkit-transform:rotate(-30deg); transform:rotate(-30deg); margin: 3px 3px;
}
.iris6::before{ -webkit-transform:rotate(30deg); transform:rotate(30deg); margin: 3px 7px;
}
.iris5::after,.iris6::after{ content:""; display:block; width:12px; height:6px; border-radius:0 0 9px 9px; border-bottom: 5px solid gray; }
.iris5::after{ -webkit-transform:rotate(-30deg); transform:rotate(-30deg); margin: -9px 9px;
}
.iris6::after{ -webkit-transform:rotate(30deg); transform:rotate(30deg); margin: -9px 4px;
}
.boca{ position:absolute; width: 14px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#ff6666; margin:40px 38px
}
.boca::before{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#121212; margin: 3px -12px
}
.boca::after{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#121212; margin: 3px 4px
}
.boca3{ position:absolute; width:9px; height:12px; border-radius:0 0 12px 12px; background:#ff6666; border:3px solid #CC3939; margin:60px 38px; -webkit-animation:sube .3s alternate infinite; animation:sube .3s alternate infinite;
}
.boca5{ position:absolute; width:12px; height:12px; border-radius:100%; border-top:6px solid #CC3939; margin:63px 39px; }
.boca9{ position:absolute; width:9px; height:7px; border-radius:0 0 12px 12px; background:#ff6666; border:4px solid #333; margin:60px 36px; -webkit-animation: sube3 3s alternate infinite; animation: sube3 3s alternate infinite;
}
.body{ position:absolute; display:block; width: 60px; height: 80px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:black; margin:90px 45px
}
.body::before{ content:""; display:block; width:80px; height:55px; border-radius:100%; background:black; margin:35px -9px
}
.legs{ position:absolute; width:35px; height:16px; border-radius:12px; background:black; margin:-50px -14px
}
.legs::before{ content:""; position:absolute; width:35px; height:16px; border-radius:12px; background:black; margin:0px 55px
}
.brazos,.brazos3{ position:absolute; width: 16px; height: 50px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:black; border:1px solid gray; }
.brazos{ margin:87px 80px; -webkit-animation:salu3 .3s alternate infinite; animation:salu3 .3s alternate infinite;
}
.brazos3{ height: 60px; margin: 121px 50px;
-webkit-transform:rotate(192deg); transform:rotate(192deg)
}
.brazos5,.brazos6{ position:absolute; display:block; width: 16px; height: 55px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:black; border:1px solid gray; -webkit-animation:va 3s alternate infinite; animation:va 3s alternate infinite;
}
.brazos5{ margin: 55px 22px; -webkit-transform:rotate(7deg); transform:rotate(7deg);
}
.brazos6{ margin: 55px 50px; -webkit-transform:rotate(-7deg); transform:rotate(-7deg); -webkit-animation:va3 3s alternate infinite; animation:va3 3s alternate infinite;
}
.brazos7, .brazos9{ position:absolute; display:block; width: 16px; height: 60px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:black; border:1px solid gray;
}
.brazos7{ margin: 121px 55px; -webkit-transform:rotate(172deg); transform:rotate(172deg)
}
.brazos9{ margin: 121px 77px; -webkit-transform:rotate(-172deg); transform:rotate(-172deg)
}
.cola, .cola5, .cola7{ position:absolute; width:60px; height:16px; border-radius:21px; background:#121212; }
.cola{ margin:152px 102px;
}
.cola5{ margin:132px 90px; -webkit-transform:rotate(-50deg); transform:rotate(-50deg)
}
.cola7{ margin:132px 12px; -webkit-transform:rotate(50deg); transform:rotate(50deg) }
.cola3, .cola6, .cola9{ position:absolute; width:21px; height:21px; border-radius:100%; background:black; -webkit-animation:baja 3s alternate infinite; animation:baja 3s alternate infinite;
}
.cola3{ margin:152px 142px;
}
.cola6{ margin:112px 121px; }
.cola9{ margin:112px 12px; }
.lag, .lag3{ position:absolute; width: 9px; height: 9px; background:rgba(255, 255, 255, .7); border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-132deg); transform: rotate(-132deg); }
.lag{ margin:3px 12px
}
.lag3{ margin:3px 9px
}
.bigotes,.bigotes5{ position:absolute; width:43px; height:2px; background:black; }
.bigotes{ margin:80px 21px
}
.bigotes5{ margin:60px -9px
}
.bigotes::before, .bigotes5::before{ content:""; position:absolute; width:33px; height:2px; background:black; -webkit-transform: rotate(-21deg); transform: rotate(-21deg);
}
.bigotes::before{ margin:3px 3px;
}
.bigotes5::before{ margin:3px 3px;
}
.bigotes3, .bigotes6{ position:absolute; width:43px; height:2px; background:black; }
.bigotes3{ margin:80px 90px
}
.bigotes6{ margin:60px 55px
}
.bigotes3::before, .bigotes6::before{ content:""; position:absolute; width:33px; height:2px; background:black; margin:4px 3px; -webkit-transform: rotate(21deg); transform: rotate(21deg);
}
@-webkit-keyframes salu3{ 0%{-webkit-transform:rotate(-53deg);transform:rotate(-53deg)} 70%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes salu3{ 0%{-webkit-transform:rotate(-53deg);transform:rotate(-53deg)} 70%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
} @-webkit-keyframes sube{ 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 70%{-webkit-transform:translatey(-9px);transform:translatey(-9px)} } @keyframes sube{ 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 70%{-webkit-transform:translatey(-9px);transform:translatey(-9px)} }
@-webkit-keyframes sube3{ 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 70%{-webkit-transform:translatey(-9px);transform:translatey(-9px)} }
@keyframes sube3{ 0%{-webkit-transform:translatey(0px);transform:translatey(0px)} 70%{-webkit-transform:translatey(-9px);transform:translatey(-9px)} } @-webkit-keyframes baja{ 0%{-webkit-transform:translatey(0px) translatex(0px);transform:translatey(0px) translatex(0px)} 70%{-webkit-transform:translatey(-5px) translatex(3px);transform:translatey(-5px) translatex(3px)} } @keyframes baja{ 0%{-webkit-transform:translatey(0px) translatex(0px);transform:translatey(0px) translatex(0px)} 70%{-webkit-transform:translatey(-5px) translatex(3px);transform:translatey(-5px) translatex(3px)} }
@-webkit-keyframes abre{ 0%,25%,70% {opacity:1;} 45% {opacity:0;}
}
@-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 va{ 0%{margin: 45px 22px;} 70%{margin: 60px 22px; }
}
@keyframes va{ 0%{margin: 45px 22px;} 70%{margin: 60px 22px; }
}
@-webkit-keyframes va3{ 0%{margin: 45px 50px;} 70%{margin: 60px 50px;}
}
@keyframes va3{ 0%{margin: 45px 50px;} 70%{margin: 60px 50px;}
}
@-webkit-keyframes rotar{ 0%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)} 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}
}
@keyframes rotar{ 0%{-webkit-transform:rotate(-7deg);transform:rotate(-7deg)} 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(7deg);transform:rotate(7deg)}
}
@-webkit-keyframes rotar3 { 0%{-webkit-transform:rotate(3deg);transform:rotate(3deg)} 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}
}
@keyframes rotar3 { 0%{-webkit-transform:rotate(3deg);transform:rotate(3deg)} 50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(-3deg);transform:rotate(-3deg)}
}
@-webkit-keyframes rot{ 0%{-webkit-transform:rotate(-33deg);transform:rotate(-33deg)} 50%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)} }
@keyframes rot{ 0%{-webkit-transform:rotate(-33deg);transform:rotate(-33deg)} 50%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)} }
@-webkit-keyframes rot3 { 0%{-webkit-transform:rotate(33deg);transform:rotate(33deg)} 50%{-webkit-transform:rotate(12deg);transform:rotate(12deg)} }
@keyframes rot3 { 0%{-webkit-transform:rotate(33deg);transform:rotate(33deg)} 50%{-webkit-transform:rotate(12deg);transform:rotate(12deg)} }
| Developer | Judith Neumann |
| Username | judag |
| Uploaded | October 13, 2022 |
| Rating | 4 |
| Size | 3,437 Kb |
| Views | 16,192 |
Do you need developer help for Little black kittys?
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 | Size |
| Snow in town | 3,372 Kb |
| Code and view | 3,096 Kb |
| Css flat day landscape | 4,610 Kb |
| Colorfull night... | 2,818 Kb |
| Fireworks | 2,722 Kb |
| Take a beer | 2,581 Kb |
| Antartic day | 3,901 Kb |
| Fairy | 3,452 Kb |
| Be in touch | 3,222 Kb |
| Forest | 3,273 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Simple Accordion | Wearebold | 3,683 Kb |
| A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
| Sample Profile Screen | OurDailyBread | 5,375 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| Fading Navigation Bar | J-w-v | 2,805 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| A Pen by aleen42 | Aleen42 | 11,473 Kb |
| Toggle menu | Seyedi | 2,279 Kb |
| Ghost | Mghayour | 11,738 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!