Animation with html and css coding.
This animation is created with svg and circle tag and its color and radius of circle is changed with animate tag of html.
This animation does't depend on pixel so zoom as your browser can for larger size without lose of quality.
What you need for creating animation like above.
- Basic knowledge of html and css.
- Text editor like notepad , better if you use Standard code editor.
Recent animation post
1. A animation with html tag used for creating a line and circle
2. New edition of Animation with html and css (line, animate and and css property) - topforways.blogspot
3. Animation with html and css (line, animate and and css property) - topforways.blogspot
Lets start coding to create animation like this one.
Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create svg element and define its width and height you want for your loadind animation As in below code
<svg height="150" width="600">
</svg>
</svg>
Step third :-Now create circle tags for this animation(minimum 5 for better look) as in below code
Give same value for cy , so circles appears in line and different value for cx , so separate them in line.
<svg height="150" width="600">
<circle cx="220" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".3s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".3s;op.end+3s" ></animate>
</circle>
<circle cx="260" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".6s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".6s;op.end+3s" ></animate>
</circle>
<circle cx="300" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".9s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".9s;op.end+3s" ></animate>
</circle>
<circle cx="340" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin="1.2s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" ></animate>
</circle>
<circle cx="380" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin="1.5s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin="1.5s;op.end+3s"></animate>
</circle>
</svg>
<circle cx="220" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".3s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".3s;op.end+3s" ></animate>
</circle>
<circle cx="260" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".6s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".6s;op.end+3s" ></animate>
</circle>
<circle cx="300" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin=".9s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin=".9s;op.end+3s" ></animate>
</circle>
<circle cx="340" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin="1.2s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" ></animate>
</circle>
<circle cx="380" cy="75">
<animate attributeName="r" from="5" to="20" dur="1.5s" repeatCount="100" begin="1.5s;op.end+3s" ></animate>
<animate attributeName="fill" from="red" to="blue" dur="1.5s" repeatCount="100" begin="1.5s;op.end+3s"></animate>
</circle>
</svg>
No comments:
Post a Comment