Hello to all of you. Welcome to today's tutorial. In today's lesson, we'll learn how to create animation and artwork for Fox characters. This animation will be made using HTML and CSS; JavaScript is not needed. We used no external libraries, plugins, images, or icons to create this animation.
This kind of complex animation is rarely used in real-world projects, as I have mentioned in my tutorials. However, they are a fun way to find and play with new CSS properties.
Things You'll Find Out About:
In this tutorial, you will:
- Discover the basics of styling elements with CSS.
- Learn about pseudo-elements.
- Learn how to create shapes and designs using only CSS properties.
Video Tutorial:
For a better understanding of how we have implemented the functionality of this project, I would advise you to watch the video below. Please like the video and subscribe to my YouTube channel, where I regularly publish new HTML, CSS, and Javascript tutorials and tips.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Fox Animation’. Inside this folder, we have two files. These files are – index.html and style.css. The first file is the HTML document while the second one is the stylesheet.
HTML Structure:
Let's start coding. We will create all the parts of the fox character using HTML div elements. Each element is assigned a class. The fox character will not be created with just div elements. All the elements need to be positioned. CSS is needed to define the color, position, and animation of all the elements of the fox character.
The table shows which parts of the fox the classes represent.
| Class Name | Description |
|---|---|
| .fox | The main container of the fox character, Of which all the structures of the fox character. |
| .head | Fox head, this is slightly above the entire frame. |
| .ear.left and .ear.right | The fox ears. The ears are on either side of the head, making the fox face stand out more. |
| .eye.left and .eye.right | Two symmetrical eyes. |
| .nose | small nose, located between the two eyes. |
| .sides (.left and .right ) | Fur on both sides of the fox. Three triangular furs are designed on both sides of the fox cheeks. |
| .body | Main body of the fox, which is located below the head. |
| .tall | Fox tail. The fox tail is located in front of its body. No animation is used on the tail. So the tail can't move at all. It can be customized. |
StyleSheet (CSS):
Moving on to CSS code. Let us start by setting a pleasant shade like the color slate blue (Hex-code: #749696) as a background to our page. The first thing we want to do is center our fox character. We will use flex layout for the centering purpose. You can learn more about the Flex layout here.
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #749696;
}Centering The Main Container:
Here too, we will use flex layout to centralize the main container. We will set the margin of the top (8em) and auto to be equal on both sides. And the position will also be relative.
.fox {
margin: 8em auto;
position: relative;
display: flex;
justify-content: center;
justify-items: center;
}Styling the fox head:
The fox is a cute animal, so we used the orange color on its head. The white color has been used on the face. The height and width have been set to 200 pixels to express the shape of the face. The edges of the head have been beautifully curved using a border radius. As a result, the head looks round and sharp. The head was then rotated at a 45-degree angle using transform rotate so that the head looks exactly like a fox head.
But just having a head won't do! We put white spots to make the fox face stand out more clearly. So we used two additional parts, which are head after (.head.after) and head before (.head.before). These are called pseudo-elements.
Styling the fox ear:
You need two ears after creating the fox head. A fox face would not be complete without ears. First, we will give the basic shape of the ear. We will use background white to keep the inside of the ears white and box-shadow to make the outside look orange. The fruit will be white inside and have an orange glow around it, which will look like real fox ears.
.ear {
height: 100px;
width: 150px;
top: 6px;
background: #ffffff;
box-shadow: 0 0 0 23px #f9931d;
}
Then the ear is divided into two parts—the right ear (.ear.right) and the left ear (.ear.left).
Right Ear:To rotate the ear a bit, we will use transform rotate. To curve the ear's shape, use a border radius. Additionally, we will add a small moving animation to the ears using the animation @keyframes. The ear will seem to be swaying a little as a result.
.ear.right {
transform: rotate(319deg);
left: 90px;
animation: right-ear-move 1.5s ease-in-out infinite alternate;
border-radius: 250% 0% 250% 0%;
}It is constructed similarly. We'll rotate it 41 degrees using transform rotate. We'll use Left minus 45 pixels to move it to the side above the head. We'll add animation to this as well.
.ear.left {
transform: rotate(41deg);
left: -40px;
border-radius: 0% 250% 0% 250%;
animation: left-ear-move 1.5s ease-in-out infinite alternate;
}With @keyframes right-ear-move, we will rotate the right ear slightly, sometimes straightening it. As a result, it will look like the right ear is moving a little.
@keyframes right-ear-move {
0%, 50% {transform: rotate(330deg)}
25%, 75% {transform: rotate(340deg)}
100% {transform: rotate(319deg)}
}With @keyframes left-ear-move, we will do the same animation for the left ear. Sometimes the ear leans forward; sometimes it returns to its original position.
@keyframes left-ear-move {
0%, 50% {transform: rotate(20deg)}
25%, 75% {transform: rotate(30deg)}
100% {transform: rotate(41deg)}
}Styling the fox ear:
The most important part of a fox face is its eyes. No animal's face is complete without eyes. So now we will create eyes for the fox. For this, we have used an "eye" class.
First, we will create the shape of the eye. The height and the width of the eye are also set to 30 pixels. We will use position-absolute for the eye in the correct position inside the fox head. We will position the eye 150 pixels down when measured from the top.
We'll set the z-index to 5 to keep the eye in the front so it doesn't get buried under the rest of the head or face.
The most interesting part is the top of the eye. There we will set the border-top to 15 pixels of black color. This line will actually look like the fox eyelid.
.eye {
height: 30px;
width: 30px;
position: absolute;
top: 150px;
z-index: 5;
background: white;
border-radius: 50%;
border-top: 15px solid #50332d;
}Now the eye is divided into two parts—the right eye and the left eye.
We will place the right eye (.eye.right) on the right side of the fox head. For this, we will set left to 186 pixels.
In the same way, we will place another eye (.eye.left) on the left side of the head. For this, we will set left 88 pixels. In this, the left eye will also sit in its place nicely.
.eye.right {
left: 186px;
}
.eye.left {
left: 88px;
}Styling the fox small nose:
While creating the fox face, the head, ears, and eyes have been created. But the face is never complete without one thing, and that is the nose. Without a nose, a fox will never look real. So now we will create the fox nose. We will use the nose class.
First, we well set the width and height of the nose to 56 and 30 pixels. This means the nose is a bit wide but not too long. Then, using position absolute, we'll position it in the correct position within the head. We'll keep the nose color and eye color the same.
.nose {
width: 56px;
height: 30px;
position: absolute;
z-index: 5;
top: 228px;
left: 123px;
background-color: #50332d;
border-radius: 50%;
}Styling the fox fur:
The fox face is incomplete without fur. So we will create the fur using the ".sides" class.
First, the height and weight are set to 59 pixels and 65% to define the entire area where the mustache will be drawn. Now we have divided the whiskers into two parts—left fur (.left) and right fur (.right). Using pseudo-elements, the three white lines on the right and three white lines on the left make the fox face more realistic.
.sides {
position: absolute;
top: 184%;
height: 59px;
width: 65%;
z-index: 4;
}
.sides .left::after,
.sides .left::before,
.sides .left {
border-right: 20px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.sides .right::after,
.sides .right::before,
.sides .right {
border-left: 20px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.sides .left {
position: absolute;
top: 10px;
left: -5px;
transform: rotate(-20deg);
}
.sides .right {
position: absolute;
top: 10px;
right: -5px;
transform: rotate(20deg);
}
.sides .right::after {
position: absolute;
display: block;
content: "";
top: 0;
right: 2px;
}
.sides .right::before {
position: absolute;
display: block;
content: "";
top: -17px;
right: 2px;
}
.sides .left::before {
position: absolute;
display: block;
content: "";
top: -17px;
left: 2px;
}
.sides .left::after {
position: absolute;
display: block;
content: "";
top: 0;
left: 2px;
}Styling the fox body:
Here, the position is absolute so that the body can be placed correctly under the head. By giving the top 193 pixels, it is placed right under the head. Again, using left calc((100% - 63%) / 2), the body is placed exactly in the middle so that the fox body and head are in line.
The body shape has been given a height of 215 pixels and a width of 200 pixels; as a result, it looks like a medium-lengthy body. The color of the body is a mix of orange and yellow, which blends with the color of the head. Finally, the body is placed below the head layer with a z-axis index of 2.
.body {
position: absolute;
top: 193px;
left: calc((100% - 63%) / 2);
height: 215px;
width: 200px;
background: #fcab17;
border-radius: 50% 50% 20% 20% / 50%;
z-index: 2;
}Styling the fox tail:
Here, the position of the tail has been determined by using position absolute so that the tail can be placed in the correct place. By giving the top 92 pixels, the tail seems to be coming out from the middle of the head and body. Again, using left calc((100% - 133%) / 2), the tail has been placed correctly in the middle.
Not just one color is used to make the tail look more beautiful. Here, using linear-gradient, the tail is painted with white and orange. This makes the tail look very real.
.tall {
position: absolute;
top: 92px;
left: calc((100% - 133%) / 2);
height: 155px;
background: #f9931d;
width: 300px;
background-image: linear-gradient(294deg, #fff 30%, #f9931d 30%);
border-radius: 100% 50% 23% 103% / 81%;
z-index: 2;
transform: rotate(15deg);
}
Answering one of the common questions, ‘Why are fox fur created with ::before and ::after?’
– ::before and ::after can draw multiple lines from the same element. As a result, multiple white lines are formed on the left and right sides, which look like fox fur.
‘What should I change to make the fox ear animation faster?’
– Animation-duration needs to be changed. Currently has 1.5 seconds, need to reduce it.
That’s it for this tutorial. I hope you guys enjoyed this tutorial. You can stay updated with the latest tutorials by subscribing to us on YouTube. You can also find us on Facebook. Happy Coding!
Post a Comment