And it is rotating around this division so this is what we're gonna design in this video let's get started right here i have opened up this folder.
Called animated border and i have opened it in vs code and let's start by creating our files so let's create an html file so i'll just click on new file and we'll just name.
This index.html and let's create one more file for the css and i'll just name it style.css all right now let's go to our html file now in vs code you have a shortcut where.
You can just press exclamation and press tab and you'll have this basic html5 code all right now here in the head section i'll just link the css file so i'll just.
Type link and press tab and here in the hdf i'll just type style.css now first of all we'll create a division with a class of animated border so i'll just type animated border over.
And we'll be using this animated border division for the border so for now i'll just type hello over here right now let's open this in our browser so i have this extension called live.
Server installed in vs code so you can just search for live server over here and you can just install this extension and once you do that you can just right click over here in the html and click on.
Open with live server all right that's it with the html now let's go to our css and let's start styling this first of all we'll style the animated border division so i'll.
Just type dot animated border and we'll set a width of 300 pixels and a height of 300 pixels and let's add a background color to see whether it is being applied.
So here we can see we have a division with the height and width of 300 pixels and we'll also add a box shadow so i'll just type box shadow and we'll set the values to 0 4 pixels 40 pixels negative.
16 pixels rgba 0 0 0 and 0.2 Wesdigital
And we'll also have rounded corners so i'll just type border radius and we'll just set it to 24 pixels right now let's style the card division.Inside the animated border so here we can see we have this division of the class of card so let's style that i'll just type animated border card and for the card we will have a width of 95.
Percent of the parent and also a height of 95 percent and let's set the background color to white and we'll also have a border radius for.
This as well so i'll just have border radius of 24 pixels and now we need to bring this card to the center of the animated border division so for this animated border.
I'll just type position of relative so that this card will be positioned relative to the animated border and now here in the card i'll just type position absolute.
And i'll just set the left position to 50 percent and the top position to 50 percent and now here we can see that the card starts from the center of the animated border division now we need to.
Bring this uh fifty percent to the left and fifty percent to the top so i'll just type transform translate and we'll just set it to negative fifty percent on the x axis.
And negative 50 on the y axis now here we can see that the card is exactly in the center of the animated border now i will also bring this text to the center so i just type display of grid.
And place items center and let's set the font family to roboto black and we'll just set the font size to 60 pixels.
Now the next thing we will do is we'll
Create an after element so let's type animated border column column after now after elements are used to add more.Data to an html element so here we can see we have this animator border division now we are adding an after element to that so if i just type content.
And if i just type let's say hello and we can see hello is being displayed over here because it is added to the animated border division now you can use after elements in a lot of different.
Ways for now i'll just delete hello from here but you need to keep this content property over here and here i'll set the width and the height to a lot more than the animated border so i'll just type.
Height of 150 percent and a width of 150 percent i will set the position of the after element relative to the animated border.
So here we already have position relative written so here in the after element we can just type position and we just set it to absolute and i'll just add a background color so.
That we can see it now here we can see we have this yellow after element now it is above all the other elements so we have to set the z index as well.
But before that let's go ahead and set the actual background color for our after element so here we will add a conic gradient so i'll just type conic gradient and here we can add different.
Colors so i'll just type red yellow blue and red at the end so now we can see we have this conic gradient and we have all these colors over here now let's set a negative z index to this so here i'll.
Just type z index and i'll just set it to negative one and now we can see that the after element is behind all the other elements now let's go back to our animated border.
And i'll just remove this background color from here and now here we can see we have this border with multiple colors now we have to set the position of the after element to the center of this.
Division so let's go back and let's set the left position to 50 percent and the top position to 50 and we'll also set a transform translate of negative 50.
For the x axis and negative 50 for the y axis and now we can see that the after element is perfectly in the center right now let's go back to the animated border.
And we will set an overflow of hidden because we don't want anything outside this border to be visible so i'll just type overflow and i'll just set it to hidden and now here we can see.
We have this colorful border now the last thing we need to do is animate this so let's scroll down and let's create an animation so here in the after element i'll just type.
Animation and we'll create an animation with a name of spin and we'll set the duration of the animation to 8 seconds and we'll run it for infinite amount of times and we'll.
Also set the easing function to linear right now let's create this animation so let's type at keyframes and for the name i'll just tap spin and here we can have keyframes for the animation from zero.
Percent to so i'll just directly type 100 over here because all these default styles will be set as the zero percent frame and here in the transform we'll just type rotate.
Z and we'll just set it to zero degrees and i'll just copy this line of code from here and i just pasted it inside hundred percent and here i'll just type.
360 degrees so that it will have a full rotation right now let's save this and now we can see we have this animated border for our division so that's basically how you create an animated.
Border using html and css so that's it for this video i will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this.
Video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .