Let us learn how to create a simple fish animation using only CSS. We will create a simple design to show how to combine CSS features like keyframes, transforms, and box shadow to create a smooth fish animation. We won't be using any Javascript - just HTML and CSS.
Before starting the tutorial, I want to tell you that this type of CSS art is not used anywhere in reality or can also be used on the loading page of a website. I have made this tutorial here to have fun with CSS properties with you. So let's explore some new aspects of CSS properties.
HTML Editor:
HTML
We'll start by creating a div element and giving it the class name "fish". This will serve as the main container for our fish animation. Inside this container, we created another div element with the class name "eye". This element will represent the fish eye and can later be styled and animated using CSS. These two elements together form the basic structure of fish.
<div class="fish">
<div class="eye"></div>
</div>
Are you interested in CSS art? CSS Pig Drawing | CSS Art
Stylesheet (CSS):
Centering the fish:We will make some basic settings to center the main content of the document body on the screen. For this we are using the flexbox method, which is a convenient way to align items horizontally and vertically.
First we set the display property to flex which turns the body into a flex container. Then using justify-content and align-items we ensure that any elements inside the body are perfectly centered in the middle of the screen.
We set the height property to 100vh so that the body always occupies the full height of the browser window. The background is set to a light blue color to simulate a calm underwater environment for the fish animation. Finally, we use overflow so that no element scrollbars appear during the animation, like the animated parts of the fish.
body{
display: flex;
justify-content: center;
align-items: center;
background: #7fc3ff;
height: 100vh;
overflow: hidden;
}
Styling the fish body:
Once the HTML document body is set up, we will style the main container of the fish (the fish body). So we will start the CSS with the fish body shape value 150px width and height.
Next we will apply a linear-gradient to the background of the fish body that will create two shades of blue mixed at a 45 degree angle. This gradient helps to give the fish a subtle look so that it stands out. We want the body to be shaped like a pomfret fish, so we set a Transform CSS property to 45 degrees. Then we also add an inset box-shadow to give the fish body some depth.
.fish{
width: 150px;
height: 150px;
background: linear-gradient(45deg, #4d68cb 40%, #5f82ff 60%);
transform: rotate(45deg);
box-shadow: inset -5px -15px 0px 0px #3a55b5;
}
Next, we will create the fish tail using the ":after" pseudo-element. So first, we set the content CSS property to an empty string, which allows us to create a tail without creating additional HTML elements.
If we had not rotated the fish body 45 degrees, setting the tail to 100% from the left would have completed our task of positioning the tail. But due to the 45 degree rotate, we have to set 100% from the bottom side along with the left setting.
Next, to maintain proportionality, we give the tail the same width and height as the fish body. For the background, we use a linear-gradient CSS property. Finally, we apply an animation called tail. This animation runs infinitely at a linear speed of 1 second.
.fish:after{
content: "";
position: absolute;
bottom: 100%;
left: 100%;
width: 150px;
height: 150px;
background: linear-gradient(45deg, #4058af 25%, transparent 25%);
animation: tail 1s linear infinite;
}
This time it will be fish eyes. Since we are making one side of the fish, we will focus on making only one eye of the fish. First, we set the width and height CSS properties to 30px to facilitate the eye being perfectly round. Then the background color is set to black (hex code #000) and the border-radius CSS property is set to 50% to make the eye perfectly round. To properly position the eye on the fish body, we set the margin from the top to 60% and the margin from the left to 8%. These values position the fish eye correctly from the top and left sides of the fish.
For extra visual detail, we apply a CSS box-shadow property. The first part of the CSS box-shadow property is an inset white ring that gives the eye some depth. The second part adds a subtle outer blue glow.
.eye {
width: 30px;
height: 30px;
background: #000;
border-radius: 50%;
margin-top: 60%;
margin-left: 8%;
box-shadow: inset 0 0 0 8px #fff, 4px -2px 0 6px #8da6ff;
}
Now we will create a simple animation for the fish tail using a keyframe called "tail". The animation creates a gentle movement over time by controlling the width of the tail.
Initially when the keyframe is 0% we will set the tail width to 150px. Then when the keyframe is 50% in the middle of the animation, I'll increase the width from 200px. When the keyframe is 100%, set the width to 150px and complete the animation cycle.
@keyframes tail {
0% {
width: 150px;
}
50% {
width: 200px;
}
100% {
width: 150px;
}
}
Post a Comment