(line , animate and css property ) - top4ways
The below animation is created with the help of html5 and css.
Take a look to the animation first.
What you need for this animation ?
- Basic knowledge of html and css.
- Text editor like Notepad, Better if you use code editor.
List of html tag and css property used in this animation.
- line tag used 96 times
- animate tag used 96 times
- stroke
- stroke-linecap
- stroke-width
Lets start coding for creating above animation
Step first : Create svg (scalable vector graphics) and define its height equal to width.(example width="600" height="600").As in the below code -
Step second :Create line tag inside the svg and define its x1, y1, x2, y2, and some css property (x1,y1 define is initial point of line and x2,y2 are its final point ) as in below code: -
Step third :After defining all line for the above animation the code looks like the below code.
Step fourth: Now save this text file with html extension and run it on any browser.
If you have any problems in saving this animation file. You can download it just click on the download botton.
No comments:
Post a Comment