Scribd
Upload
8 views2 pages

Index HTML

This document is an HTML example showcasing graphics animation using CSS, SVG, and Canvas. It includes a CSS animated box that changes position and color, an SVG circle that moves horizontally, and a JavaScript-based bouncing ball on a canvas. The animations demonstrate various techniques for creating dynamic visual effects in web development.

Uploaded by

lisunuru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views2 pages

Index HTML

This document is an HTML example showcasing graphics animation using CSS, SVG, and Canvas. It includes a CSS animated box that changes position and color, an SVG circle that moves horizontally, and a JavaScript-based bouncing ball on a canvas. The animations demonstrate various techniques for creating dynamic visual effects in web development.

Uploaded by

lisunuru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>
<head>
<title>Graphics Animation Example</title>
<style>
body {
background: #111;
color: white;
font-family: sans-serif;
text-align: center;
}
.css-box {
width: 80px;
height: 80px;
background: lime;
position: relative;
animation: moveBox 3s infinite ease-in-out;
margin: 20px auto;
}
@keyframes moveBox {
0% { left: 0px; background: lime; }
50% { left: 200px; background: cyan; }
100% { left: 0px; background: lime; }
}
canvas {
border: 2px solid #fff;
margin-top: 20px;
}
</style>
</head>
<body>

<h2>🌟 Graphics Animation in 1 HTML 🌟</h2>

<!-- CSS Animated Box -->


<div class="css-box"></div>

<!-- SVG Animation -->


<svg width="200" height="100">
<circle cx="50" cy="50" r="30" fill="orange">
<animate attributeName="cx" from="50" to="150" dur="2s"
repeatCount="indefinite" />
</circle>
</svg>

<!-- Canvas Bouncing Ball -->


<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
const canvas = [Link]("myCanvas");
const ctx = [Link]("2d");

let x = 30;
let dx = 2;
function draw() {
[Link](0, 0, [Link], [Link]);
[Link]();
[Link](x, 75, 20, 0, [Link] * 2);
[Link] = "red";
[Link]();
x += dx;
if (x > [Link] - 20 || x < 20) dx = -dx;
requestAnimationFrame(draw);
}
draw();
</script>

</body>
</html>

You might also like