Animation Html Code :
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes Animation1
{
0%{left:10px; top:10px;}
25%{left:380px; top:10px;}
50%{left:330px; top:230px;}
75%{left:10px; top:230px;}
100%{left:10px; top:10px;}
}
@keyframes Animation2
{
0%{left:800px; top:30px;}
25%{left:1000px; top:30px;}
50%{left:1000px; top:230px;}
75%{left:800px; top:230px;}
100%{left:800px; top:30px;}
}
#img1
{
width:70px;
height:70px;
position:relative;
left:300px;
top:20px;
animation-name:Animation1;
animation-duration:10s;
animation-delay:2s;
animation-iteration-count: 5;
}
#img2
{
width:70px;
height:70px;
position:relative;
left:800px;
top:20px;
animation-name:Animation2;
animation-duration:10s;
animation-delay:2s;
animation-iteration-count: 5;
}
#div1
{
border:0px solid blue;
border-radius:10px;
position:relative;
left:460px;
bottom:50px;
height:400px;
width:400px;
}
h1
{
color:lightblue;
font-family:tahoma;
}
</style>
</head>
<body bgcolor="black">
</hr>
<img id="img1" src="diwali.png" width="100" height="100"/>
<img id="img2" src="diwali.png" width="100" height="100"/>
<div id="div1">
<img src="happy diwali2.gif" width="400" height="400"/>
</div>
<br><br>
<h1><marquee> this Animation created by sreenu</marquee></h1>
</body>
</html>
Best Html template Designer & Convert You PSD,PNG to Html5 shanila
ReplyDelete"Dear Admin,
ReplyDeleteI am Jamal Lloyd Johnson. Very informative post! I am thankful to you for providing this unique information.
Jamal Lloyd Johnson
Apollo Management:Mail: 1236 N. Sweetzer Ave, unit 17
West Hollywood, CA 90069
Jamal Lloyd Johnson
Jamal Lloyd Johnson
Jamal Lloyd Johnson
Jamal Lloyd Johnson"
Big Aquatic
ReplyDeletewebsite designing company in Gorakhpur
My site is now integrated with my social media. fort worth texas web design
ReplyDelete