Hi guys, welcome back to another video. Today in this video we are going to create an animation using CSS
On this text page you can see I have added a text and in front of this text there is a square which is rotating
When this square is rotating you can see two sides of this square is just behind the text and two other sides of this text is above this text
So we will learn how to create this animation using HTML and CSS. So let's start this video
Here in this folder I have one index.html file and another file called style.css
Let me open these files with my code editor which is Visual Studio Code
So this is the HTML file where I have added the basic HTML sections and this one is the CSS file
In this HTML file I have added this link tag that will connect HTML and CSS file
Now we will add code in the body tag. So here we will create one bit with the class name container
Next we will add the CSS for this container. So write this class name in the CSS file. Here we will add some CSS properties
Here we will add the background. And let's add the display. Let's align items center and justify content center
So that all the contents inside this container will be in the center of the web page
After adding this let's come back to this folder and open this HTML file with any web browser
So you can see this dark color on the complete web page
Let me close this browser and I will open this browser with the Visual Studio Code extension called light server
So that it will reflect the website automatically whenever we will add any changes
So you can see the same web page. Now let's come back and we have to add one title in this page
So here we will add a title in h1. After adding this you can see this title in the center of this web page
Next we have to increase the font size and change the color for this text
So let's come back and here in this CSS file we will add h1 font size
Then we will add the color. After that letter spacing. Then font width
And position will be relative. After adding this you can see increase font size and white color for this text
Now let's come back and here we have to add h1. And then write before
And we will also add h1. After
After adding this here we will add content it will be empty
And let's add some padding. Then we will add position
Position will be absolute. And left it will be 0 and top it will be 50%
Then we will add display. Display will be blocked. And let's add transform
Transform translate x-50%. Translate y-50%
And rotate. Rotate will be 0. After adding this here we will add border. 15px. Solid
And we will add any color code here. After adding this border let's refresh the website again
And you can see the square over here. So let me come back and here we will remove this border from here
And let's add h1. Before. And in this before we will add two borders
Border top and border left. So we will add border top. 15px solid and this color
You can see only one color at the top. Let's come back and duplicate this one
And it will be left. So you can see this line in top and left side
Now let's come back and here we will add this one. After
So in this after we will add this one. And just change border bottom and border right
So here we have added top left and this one bottom and right
Now you can see that border on all the four sides. You can see a square here
Next we have to rotate this square using CSS animation. So let's come back and here in this h1 we will add animation
Write any name. I will write a string. It will be for 6 seconds. Alternate. Infinite
Is in out. Like this. Next we have to add keyframes for this string
So here we will add. Add the 8. Keyframes. String. 100%
And at 100% it should rotate the square by 360 degree. So we will copy this one and paste it here
Here we have rotation 0. So we will make it 360 degree
That's it. After adding this. Again just touch the right side and you can see this square is rotating
But right now you can see all four sides of this square is above this text
So we have to move two sides of this square behind the text. So let's come back and here in this one
H1 after we will add. Z index. Minus 1. Like this. And add here
In this h1 we will add. Z index. 1. That's it. After adding this
You can see. Two sides of this square is behind the text
So finally we have created this beautiful animation using CSS. I hope this video will be helpful for you
If you have any question you can ask me in the comment section. Like and share this video
And also subscribe my channel EG tutorials to watch more videos like this one
Thank you so much for watching this video