A animation with html tag used for creating a line and circle.
The below animation is created with the help of html5 and css.
Take a look to the animation first.
Method to create animation like above
What you need for this
●Basic knowledge of html and css.
●Any text editor, Better if you use html code editors.
Lets start coding for creating above animation.
Step first: Create an Scalable Vector Graphics (SVG) and define its height and width (For this animation i use width=600 and height=600).
Step Second: As you can see in the animation the black line are not overlapping any other circle because the line is coded first. Let start coding :-
□ X1 y1 define starting point of line.
□x2 y2 define final point of line.
□”dur” define complete time interval of animation.
□”repeatCount” define number of time the animation occurred.
Step third: Nowcode for creating red circle with position and animation as in animation.
□cx and cy define the positionof circle on x-axis and y-axis respectively.
□r define radius of circle.
Step fourth : Now code for yellow and green circle .(code for yellow than for green)
Now make a single file from the all above steps and save it as html extension and run it on any html supported browsers.
Download animation html and css file zip
No comments:
Post a Comment