UFO Animation Using CSS And HTML

Save This Code As Index.html

 

<html>
<head>
<title>
Renew Dev
</title>
<style type=”text/css”>
body{background:#111;margin:0px;}

div#banner{

width:100%;
height:667px;
margin:0px auto;
background-color:#000;
background-image:url(7.png);
background-size:25%;
background-position:-120% 70px, 0px 0px, 0px 0px;
background-repeat:no-repeat ,repeat-x, repeat-x;
animation:animate-background linear 21s infinite;

}
#body{

background-image:url(11.png);

}
@keyframes animate-background{
from {
background-position: -120% 70px, 0px 0px, 0px 0px;

}

to{

background-position:290% 70px;
}
}
</style>
<body>

<div id=”banner”>
<img src=”2.png” alt=”Earth” style=”height:300px;margin:200px 0px 0px 45%;margin-left:682px;”>

</div>

</body>
</html>

 

 

 

 

Images Used In This Code

 

1 2 2 4 5 7 8 twiz-landing-ufo

renewdev

I Am Developer And Want To Share My Knowledge With The World..:) ;) . I Have Another Social Networking Website (Renewchat) And For Designing Or Developing Of Website Purpose You Can Contact Me On Renew Coder .. :) ;)

Leave a Reply

Your email address will not be published. Required fields are marked *