Monday, 18 February 2019

FISH ANIMATION USING CSS3


<!create a web page fish animation using css3 !>
<html>
<head>
<style>
#m3
{
  position:absoute;
  left:250px;
  top:-5
}
</style>
</head>
<body background="ocean.jpg">

<marquee scrollamount="5" direction="left">
<img src="fish1.gif" width="140" height="100" />
</marquee>
<marquee scrollamount="5" direction="right">
<img src="fish2.gif" width="140" height="100" />
</marquee>
<marquee id="m3" scrollamount="5" direction="down" height="500">
<img src="fish1.gif" width="140" height="100" />
</marquee>
<marquee scrollamount="5" direction="left">
<img src="fish3.gif" width="140" height="100" />
</marquee>


</body>
</html>

VINAYAKA ANIMATION USING CSS


<!create a web page vinayaka animation using css !>

<html>
<head>
<style>
h1

  border-width:2px;
  font-family:'tahoma';
  color:green;
  
}
</style>
</head>
<body bgcolor="orange">

<marquee direction="right" scrollamount="5"><h1>Happy vinayaka chavithi</h1> </marquee>
<br/>
<marquee scrollamount="10"><img src="vinayaka.gif" width="130"/> </marquee>
<br/>
<marquee direction="right" scrollamount="5"><img src="ganesh.gif" width="200"/> </marquee>

<marquee direction="right" scrollamount="10"><img src="vinayaka.gif" width="130"/> </marquee>

</body>
</html>

Thursday, 7 February 2019

HTML 5 Graphics -SVG Demo


  1.  <html>
  2. <head>
  3. </head>
  4. <body>
  5. <h1> HTML 5 Graphics -SVG </h1>
  6. <hr/>

  7. <svg id="svg1" width="300" height="300" style="border:2px solid blue;">
  8. <line X1="0" Y1="0" X2="300" Y2="300" style="stroke:red; stroke-width:5"/>

  9. <line X1="20" Y1="0" X2="300" Y2="280" style="stroke:green; stroke-width:5"/>

  10. <line X1="0" Y1="20" X2="280" Y2="300" style="stroke:blue; stroke-width:5"/>

  11.  <line X1="300" Y1="0" X2="0" Y2="300" style="stroke:black; stroke-width:5"/>
  12.  
  13.  <line X1="0" Y1="280" X2="280" Y2="0" style="stroke:yellow; stroke-width:5"/>
  14.  
  15.  <line X1="320" Y1="0" X2="0" Y2="320" style="stroke:pink; stroke-width:5"/>
  16.  
  17. < circle cx="150" cy="150" r="60" stroke:red stroke-width:3 fill="green"/>

  18.  <circle cx="150" Cy="150" r="30" stroke:red stroke-width:2 fill="lightblue"/>
  19. </svg>

  20. </body>
  21. </html>