This image which we're going to use in our design so let's start by creating the necessary file so let's create a new file called.
Index.html and let's create another file called Styler CSS and let's start with the index.html file in vs code you can just type exclamation and press Tab and you'll.
Have this basic HTML file code and let's link our CSS file over here and now let's start with the markup of our design so what we will do is we will create a container Division and let's.
Give a class of pulse container and and in that we need to have these animations and also this image so for each of the puls we'll create divisions and uh let's create a.
Between these animations and uh then let's go ahead and create the image so I'll just create an IMG tag and for the source I'll just Tye Images slash King fisher. jpg and now let's open this our.
Browser and let's see how it looks so if you go to extensions and if you scroll down here we can see that I already installed this extension called live server so if you already have this.
Installed you can just right click over here and uh click on open with live server and here we can see that our uh design is being displayed in the browser right now let's go ahead and start with.
The styling so let's go back to our CSS file and uh first of all let's select everything and uh let's set the Box sizing to B box so that we have the correct width and height for all the.
Elements and let's set the margin to Z and uh the padding to zero for all the elements and now let go ahead and Target the body and let's bring this to the center.
Posts Related:
- Publisher 2019 for Beginners Tutorial Office
- Life Time Passwords Access For Sheri Sk Passwords Data
- How To Create A Static Homepage For Your Blogger Website - Live Blogger
So let's type display of grid Place
Items to the center and uh let's set the height to 100 VP height and now we can see that the element is in the center we'll also slightly change the.Background color so let's tap background and let's set it to F0 F0 F0 right now let's target this image and for the image uh let's also add a class so let's add a class.
Called round image and let's target that over here so I just type round image and let's add some Styles over here for the image let's say the width.
And the height to 150 pixels and we need to have round shape so let's type border radius and let's set it to 50% and let's set the Z index to one so that it is above the pulse and this is.
How the image looks right now right now let's style the pulse so here we can see that the pulse are inside the pulse container Division and we need to position this pulse relative to this.
Container division so first of all let's target the container so I just have pulse container and uh let's go ahead and uh set the position to relative and now let's go.
Ahead and Target the pulse so l a pulse and we have three divisions we have pulse one then we have pulse two and we also have pulse three and let's add some styles for these uh divisions so let's.
Set the position to Absolute so this will be positioned relative to the pulse container and let's say the width and the height to 150 pixels just like the image.
And uh let's set the Border radius to 50% for the round shape and let's set the Z index to zero and uh let's add a background color of 0035 66 and now we can see that we have.
The pulse division displayed over here
But the image is below the pulse division but we have already set the Z index of one over here but it is not being applied because uh this has a.Position value so we need to set some position over here so let's tap position and uh let's set it to relative and now we can see that the image is on top of the pulse all right now let's go ahead.
And add the animation so I'll just create an animation and uh I'll just give it a name of pulse and let's set the duration to 3 seconds and let's run it for infinite amount of times and now.
Let's create the animation so let's stop at Key frames and we have named it pulse and for the first frame let's go ahead and type transform scale of one and opacity of.
One and for the last frame so let's tap 100% here let's tap transform and let's set the scale of the pulse division to 1.5 so it will increase the scale and then we'll set the opacity to zero as we.
Reach the last frame so now let's save this and let's go back and here we can see we have the pulse animation being displayed now all these three pulse divisions are.
Having the same animation so let's go ahead and add some animation delay for each of them so that we have this kind of effect so let's go ahead and Target the second.
Pulse and uh let's add an animation delay and let's set it to one second so it will play after 1 second and for the third one let's set the animation delay to 2 seconds so the first pulse will.
Play instantly then we have the second pulse which will play after 1 second and the third pulse will play after 3 seconds so let's go back and now we can see we have this.
Pulse animation over here and now you can go ahead and change the color of the pulse to whatever you want so for example if I just change this to Red now we can see that we have this red pulse.
Animation so that's basically how you can create this pulse animation using HTML and CSS all right so that's basically it for this video 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.
