Introduction:
Welcome to this blog post, where we’ll explore how to create an animated squid using HTML and CSS. Animations can bring life and personality to web designs, and in this tutorial, we’ll dive into the code provided to understand how to create a captivating animated squid. We’ll go step-by-step through the HTML structure and the CSS styles used to bring this squid to life on the web page.
Video Tutorial:
To make the learning process more engaging and visual, I’ve created a video tutorial on my YouTube channel. The tutorial provides a detailed walkthrough of the code and demonstrates the animation of the squid. You can watch the video tutorial here.
Project Folder Structure:
Let’s begin by setting up our project folder structure. Create a new directory and organize it as follows:
- project-folder/
- index.html
- styles.css
HTML:
Now, let’s analyze the HTML structure of our animated squid. The provided code creates a container div with a class of “container” that holds the animated elements of the squid. Inside the container, we have a div with a class of “squid” that represents the body of the squid. Within the squid div, there are two additional divs: “shine” and “legs,” which contribute to the overall appearance of the squid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Squid Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="squid">
<div class="shine"></div>
<div class="legs"></div>
</div>
</div>
</body>
</html>
CSS:
Let’s explore the CSS styles applied to our HTML structure. These styles define the appearance and animation of our squid. Here’s an overview of the CSS properties used:
- We set some global styles for the body, including the background color.
- The container div is positioned absolutely in the center of the page using the transform and position properties.
- The squid div represents the body of the squid and is styled with a gradient background and border radius to create a rounded shape. It is also positioned absolutely in the center of the container and animated using a keyframe animation called “swim.”
- The before and after pseudo-elements of the squid div add additional elements to enhance the squid’s appearance, such as the squid’s head and tentacles.
- The shine div represents a shining effect on the squid’s body and is positioned and styled accordingly using border properties and transforms.
- The legs div creates the squid’s legs using a rounded rectangular shape, positioned below the body.
- The before and after pseudo-elements of the legs div add additional legs to complete the squid’s appearance, rotated at different angles.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ffbdbd;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.squid {
height: 18.75em;
width: 18.75em;
background: linear-gradient(#f01c8a, #f53e2f);
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
animation: swim 3s infinite;
}
@keyframes swim {
50% {
transform: translateY(6.25em) scaleY(0.95);
}
}
.squid:before {
content: "";
position: absolute;
height: 2.5em;
width: 2.5em;
background-color: #cd0856;
border-radius: 50%;
top: 11.25em;
left: 3.75em;
box-shadow: 8.75em 0 #cd0856;
}
.squid:after {
content: "";
position: absolute;
height: 3.75em;
width: 3.75em;
background-color: #000000;
border: 0.62em solid #ffffff;
border-radius: 50%;
top: 7.5em;
left: 3.75em;
box-shadow: 6.25em 0 0 -0.62em #000000, 6.25em 0 #ffffff;
}
.shine {
position: absolute;
border: 0.62em solid #ffffff;
height: 3.75em;
width: 6.25em;
border-radius: 50%;
border-color: transparent;
border-top-color: #ffffff;
transform: rotate(-35deg);
top: 2.5em;
left: 2.5em;
}
.shine:before {
position: absolute;
content: "";
height: 0.62em;
width: 0.62em;
border-radius: 50%;
background-color: #ffffff;
top: 0.62em;
left: -0.62em;
}
.shine:after {
position: absolute;
content: "";
height: 3.75em;
width: 3.75em;
border: 0.625em solid #000000;
transform: rotate(35deg);
border-radius: 50%;
border-color: transparent;
border-bottom-color: #000000;
left: -1.25em;
top: 7.5em;
}
.legs {
height: 7.5em;
width: 3.75em;
background-color: #f53e2f;
border-radius: 3.12em;
position: absolute;
left: 7.5em;
top: 16.87em;
z-index: -1;
}
.legs:before,
.legs:after {
position: absolute;
content: "";
height: 7.5em;
width: 3.75em;
background-color: #f53e2f;
border-radius: 3.12em;
bottom: 0;
}
.legs:before {
transform: rotate(-30deg);
left: 3.12em;
}
.legs:after {
transform: rotate(30deg);
left: -3.12em;
}
@media screen and (min-width: 800px) {
.container {
font-size: 1.2em;
}
}
Conclusion:
In this blog post, we explored how to create an animated squid using HTML and CSS. By breaking down the provided code, we learned how to structure the HTML elements and apply CSS styles to bring the squid to life. The animation of the squid’s movement and the additional elements contribute to a visually appealing and engaging design.
I hope you found this tutorial helpful in understanding how to create an animated squid using CSS. Don’t forget to check out the video tutorial on my YouTube channel for a step-by-step demonstration of the code. Feel free to experiment with the code and customize it to create your own unique animations and designs.
Thank you for reading, and happy coding!
