New edition of animation with html and css(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 ?
List of html tag and css property used in this animation.
- line tag used 96 times
- animate tag used 192 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 initial point of line and x2,y2 are its final point ) as in below code: -
This code will create only one line, you have to write this code too many times (for each line) and change its initial and final point. This is new edition of a animation published yesterday and there is only some changes . Added a new animate property for every line stroke-width from 0-5 and change in color.
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