Hello everyone! Welcome to yet another fun tutorial. In this tutorial, we will learn how to create a coder kitty animation. For this tutorial, we need HTML and CSS. This tutorial is inspired by a Google sticker by Robin Davey.
CSS Art and Animations are a great way to practice CSS properties like position and keyframes. Here is a playlist of tutorials if you would like to improve your skills by learning CSS art. If you are a total CSS beginner, you might want to learn, how to create shapes using CSS first. You can check out these tutorials to learn how.
Video Tutorial:
If you like to learn by coding along to my video tutorial, check out the video below. I post new and exciting tutorials regularly on my youtube channel. So be sure to subscribe to my channel so you don’t miss these tutorials.
Project Folder Structure:
We start by creating a project folder structure. First, create a folder called – “Coder Kitty”. Within this folder, we have two files. The first is the HTML document – index.html, and the second is the stylesheet – style.css.
HTML:
Let us begin to code the HTML section first. First, copy the code below and paste it into your HTML document. The HTML code consists of a bunch of div elements with different class names. We wrap all these elements in a div with a class name container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coder Kitty Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="kitty">
<div class="face">
<div class="ear"></div>
<div class="eye"></div>
<div class="mouth">
<div class="nose"></div>
<div class="whisker-1"></div>
<div class="whisker-2"></div>
</div>
<div class="body">
<div class="hand">
<div class="hand-l"></div>
<div class="hand-r"></div>
</div>
</div>
<div class="tail"></div>
</div>
<div class="laptop">
<div class="logo"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
Next, we add styles to these elements to shape them into a kitty and a laptop. We also need to add animations to these created shapes. For this, we need CSS. Now copy the code provided below and paste it into your stylesheet.
body {
padding: 0;
margin: 0;
background-color: #6666cc;
}
.container {
background-color: #ffffff;
width: 350px;
height: 350px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 0 20px 40px rgba(10, 10, 49, 0.15);
}
.kitty {
position: absolute;
}
.face {
position: absolute;
background-color: #6666cc;
height: 80px;
width: 150px;
border-radius: 100px;
top: 110px;
left: 82px;
}
.ear {
position: absolute;
background-color: #333399;
height: 23px;
width: 22px;
border-radius: 10px 30px 0 0;
top: -23px;
left: 60px;
box-shadow: 21px 0 #333399;
}
.eye {
background-color: #330033;
height: 12px;
width: 12px;
position: absolute;
top: 20px;
left: 70px;
border-radius: 50%;
box-shadow: 18px 0 #330033;
animation: blink 4.5s infinite;
}
@keyframes blink {
0% {
transform: scaleY(0.3);
}
4% {
transform: scaleY(0.3);
}
5% {
transform: scaleY(1);
}
}
.mouth {
background-color: #ffffff;
width: 47px;
height: 15px;
position: absolute;
top: 45px;
left: 65px;
border-radius: 20px;
}
.mouth:before {
content: "";
position: absolute;
background-color: #ffffff;
height: 25px;
width: 25px;
left: -2px;
border-radius: 50%;
box-shadow: 27px 0 #ffffff;
}
.nose {
position: absolute;
height: 0;
width: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #ff9999;
top: 0;
left: 12px;
}
.whisker-1 {
background-color: #330033;
height: 1.2px;
width: 25px;
position: absolute;
bottom: 3px;
right: 40px;
}
.whisker-1:before,
.whisker-1:after {
content: "";
position: absolute;
background-color: #330033;
height: 1.2px;
width: 20px;
right: 0;
}
.whisker-1:before {
bottom: 8px;
transform: rotate(7deg);
}
.whisker-1:after {
bottom: -8px;
transform: rotate(-7deg);
}
.whisker-2 {
background-color: #330033;
height: 1.2px;
width: 25px;
position: absolute;
bottom: 3px;
z-index: 1px;
left: 40px;
}
.whisker-2:before,
.whisker-2:after {
position: absolute;
content: "";
background-color: #330033;
height: 1.2px;
width: 20px;
left: 0;
}
.whisker-2:before {
bottom: 8px;
transform: rotate(-7deg);
}
.whisker-2:after {
bottom: -8px;
transform: rotate(7deg);
}
.body {
position: absolute;
height: 0;
width: 115px;
border-bottom: 110px solid #6666cc;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: 70px;
left: -10px;
}
.hand {
height: 50px;
position: absolute;
}
.hand-l {
position: relative;
background-color: #ffffff;
height: 29px;
width: 22px;
border-radius: 10px;
left: 45px;
top: 30px;
animation: type-1 1.5s infinite;
}
@keyframes type-1 {
50% {
transform: translateY(50px);
height: 18px;
}
}
.hand-r {
position: relative;
background-color: #ffffff;
height: 18px;
width: 22px;
border-radius: 10px;
left: 85px;
top: 48px;
animation: type-2 1.5s infinite;
}
@keyframes type-2 {
50% {
transform: translateY(-40px);
height: 29px;
}
}
.tail {
height: 22px;
width: 50px;
background-color: #333399;
position: absolute;
left: -15px;
top: 165px;
border-radius: 22px;
}
.laptop {
position: absolute;
background-color: #333399;
height: 15px;
width: 120px;
border-radius: 15px;
top: 280px;
left: 195px;
}
.laptop:before {
position: absolute;
content: "";
background-color: #330033;
height: 15px;
width: 100px;
border-radius: 15px;
top: 0;
right: 80px;
}
.laptop:after {
position: absolute;
content: "";
background-color: #330033;
height: 80px;
width: 110px;
bottom: 14px;
left: 10px;
border-radius: 5px;
transform: skew(-10deg);
}
.logo {
position: absolute;
background-color: #6666cc;
height: 18px;
width: 35px;
border-radius: 20px;
top: -40px;
left: 50px;
z-index: 1;
}
Your coder kitty animation is now ready. I hope you liked the tutorial. If you have any issues while creating this code, you can download the source code for this tutorial. To download the source code, all you have to do is click on the download button below. Also, I would love to hear from you guys. So if you have any ideas, suggestions or feedback, comment on them below.
Stay tuned for more such fun tutorials. Happy Coding!
Â
