Thursday, 11 April 2019

Happy Chistamas Animation using Html and Css




<!--create a web page to apply animation to image tag by using css AnimatioN-->
<!DOCTYPE html>
<html>
<head>
<style>
#x
{
 border:2px solid green;
 background-color:green;
 color:white;
 text-align:center;
 width-left:400px;
 padding:10px;
 border-top-left-radius:20px;
 border-bottom-right-radius:20px;
}
h2
{
 color:blue;
 text-shadow:0px 0px 5px green;
}

@keyframes Animation1
{
 from {width:100px;height:60px;transform:rotate(0deg);}
 to {width:600px;height:400px;transform:rotate(360deg);}
}
#img1
{
 width:100px;
 height:60px;
 border:0px solid blue;
 border-radius:10px;
 padding:5px;
 margin-left:50px;

 Animation-name:Animation1;
 Animation-duration:20s;
 Animation-iteration-count:5;
 Animation-direction:alternate;
 Animation-delay:4s;

}
</style>
</head>

<body bgcolor="orange">
<h1 id="x">HAPPY CHISTAMAS</h1>
<marquee><h2>HAPPY HAPPY CHISTAMAS MERRY MERRY CHISTAMAS</h2></marquee>
<br></br>
<img id="img1" src="santa1.gif"/>
<img id="img1" src="santa2.gif"/>

</body>
</html>

No comments:

Post a Comment