0:00
Hi guys, welcome back to the new video of E.G tutorials
0:03
Today in this video I will show you how to add animated image on website using HTML and CSS
0:09
As you can see on my computer screen, here I have one image with some animation and there
0:15
is an image frame or border which is also animated. This complete animated image and image frame looks very nice together
0:23
It's very easy to add this type of animated image on your website using HTML and CSS
0:29
For starting this video please hit the like button and also subscribe if you are new on my channel
0:35
Now let's start this video. First I have one folder here and in this folder I have one 옛날 file, one CSS file and two image
0:45
Now I will open my text editor which is Blacketts Editor. So this is my HTML file and this one is CSS file
0:52
You can see I have already connected HTML file with CSS with this line of code
0:57
Now we will come to the CSS file and here we will add body and for this one we will add background
1:07
This light gray color I will add. Now I will open the HTML file with Google Chrome
1:16
So you can see this light gray color on this complete webpage
1:22
Let's come back to the HTML file and in this body tag we will create one div and one class name
1:27
Let's use this class name in the CSS file and for this one we will define the width and height
1:39
Position will be relative and we add some margin from top and bottom left right auto In this div we create another div and we add one class name which is frame Let copy this class name and add it into the CSS file
2:00
For this one also we'll set the width 100% and height 100%
2:08
Here we will add border for 30 pixel solid and let me add this black color
2:15
Next we'll add position absolute z index 1
2:26
Now you can see black border over here. Let me come to the folder and you can see I have this image here that I will use as a frame
2:37
So let's come back to the CSS file and remove this color from here and
2:42
In the next line we'll add border image, URL, file name and 2525
2:50
That's it. Now refresh the webpage. Now you can see this image as a frame on this web page
3:02
Next we will animate this frame so here we'll add animation and let me add one name here
3:09
so I'm writing frame. It will be for 5 second, linear and infinite
3:16
Use this frame here, then write keyframes and write the animation name which is frame
3:23
Here we'll add 0% and when it is 0%, we'll add transition, will add transform scale 0.9
3:33
And opacity will be 0. Let duplicate it and change it to 20 When it is 20 it will become 1 and opacity 1 Duplicate it again it will be 80 and when it is 80 there is no change
3:48
again 100%. And this time we'll add transform translate by 100 pixel and opacity 0
4:02
Now we'll refresh the web page. So right now you can see very good animation for this frame
4:11
First you can see the zoom effect for this frame and later it goes down
4:23
Next we will add one image in this frame so here we'll add one div and one class name
4:29
So class name I'm adding slide and in this div we'll add one image
4:33
We will add one image so I'm using IMG source and the file name
4:39
Refresh the web page, you can see this image on this webpage
4:47
Let's copy this class name slide in the CSS file. For this one we will write position absolute, left 70 pixel and here we will add bottom
5:03
50 pixel. Let's copy it here, then write IMG for the image
5:10
Width, it will be 380 pixel, and Z-index minus 1. Refresh the webpage
5:18
Right now this image is coming very up. Let's come back to this CSS file
5:25
Here we will add minus 150 pixel Bottom will be minus 150 pixel and again refresh the web page Now you can see this image at this position and you can see this image is coming behind this frame because we have
5:40
added zenditex minus 1. Now in this slide we'll add opacity 0 and then we'll add animation
5:56
One animation name slider 5 second infinite
6:05
Let's copy this animation name, then write keyframes and this one. Here we'll again start with 0%
6:14
When it is 0, we'll add transform translate x, 50 pixels and opacity it will be 0
6:23
Just duplicate it and we'll change it to 30%. Here we will add minus 55 pixel and opacity 1
6:33
Again duplicate it make it 50. This time no change. Duplicate it again and here we'll make it 100%
6:42
When it is 100%, it will become minus 100 pixel and opacity will become 0
6:51
Now I will refresh the webpage so that you can see animation for this frame also and
6:56
this image also. First this image comes from the right side to the left side and then it disappears from
7:03
this position. As you saw this was very easy to add animated image and image frame on your website using
7:12
HTML and CSS. If you have any question let me know in the comment section
7:16
Please don't forget to like and share this video with your friends. Thank you so much for watching this video
