08-05-2022, 04:16 PM
Demonstration of CSS generated animated shapes. Coding is shown in sections that you can C&P into the Analyzer and open.
http://d21c.com/leprofesseur/1/php/newextractor.php
http://d21c.com/leprofesseur/feature.html
Here are the main code components.
This moves the stars and spreads the diamonds a the end
http://d21c.com/leprofesseur/css/heart-diamond.js
This creates the concentric circles. The circles are layered to produce a ring effect.
http://d21c.com/leprofesseur/css/circle.css
This creates the hearts
http://d21c.com/leprofesseur/css/heart.css
This creates the stars.
http://d21c.com/leprofesseur/css/star.css
Their size can be varied by these lines of code
-moz-transform: rotate(35deg) scale(.5);
-webkit-transform: rotate(35deg) scale(.5);
-ms-transform: rotate(35deg) scale(.5);
-o-transform: rotate(35deg) scale(.5);
This creates the triangles and rotates them.
http://d21c.com/leprofesseur/css/triangle.css
By varying start, cycles and iterations independent movement can be created. rd2 is the bottom red triangle and rd is the top one.
animation-name: rd2;
animation-delay: 5s;
animation-duration: 5s;
animation-iteration-count: 8;
This, as the name implies, zooms the hearts in and out.
http://d21c.com/leprofesseur/css/zoom.css
By setting the delay to 0 Prof icon appears to materialize out of thin air. The duration time controls the rate of appearance
.z-animate-zoom-p{
animation-name: animatezoom;
animation-delay: 0s;
animation-duration: 204s;
animation-iteration-count: 1;}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
The resized hearts must be wrapped in a container with the position set at left:0px;top;0px;
http://d21c.com/leprofesseur/css/tri-heart-data.css
This is the wrap for the red star. It is invisible as it doesn't contain any data
#rw{
position:absolute;left:0px;top:0px;
}
and this is the completed wrap
http://d21c.com/leprofesseur/1/php/newextractor.php
http://d21c.com/leprofesseur/feature.html
Here are the main code components.
This moves the stars and spreads the diamonds a the end
http://d21c.com/leprofesseur/css/heart-diamond.js
This creates the concentric circles. The circles are layered to produce a ring effect.
http://d21c.com/leprofesseur/css/circle.css
This creates the hearts
http://d21c.com/leprofesseur/css/heart.css
This creates the stars.
http://d21c.com/leprofesseur/css/star.css
Their size can be varied by these lines of code
-moz-transform: rotate(35deg) scale(.5);
-webkit-transform: rotate(35deg) scale(.5);
-ms-transform: rotate(35deg) scale(.5);
-o-transform: rotate(35deg) scale(.5);
This creates the triangles and rotates them.
http://d21c.com/leprofesseur/css/triangle.css
By varying start, cycles and iterations independent movement can be created. rd2 is the bottom red triangle and rd is the top one.
animation-name: rd2;
animation-delay: 5s;
animation-duration: 5s;
animation-iteration-count: 8;
This, as the name implies, zooms the hearts in and out.
http://d21c.com/leprofesseur/css/zoom.css
By setting the delay to 0 Prof icon appears to materialize out of thin air. The duration time controls the rate of appearance
.z-animate-zoom-p{
animation-name: animatezoom;
animation-delay: 0s;
animation-duration: 204s;
animation-iteration-count: 1;}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
The resized hearts must be wrapped in a container with the position set at left:0px;top;0px;
http://d21c.com/leprofesseur/css/tri-heart-data.css
This is the wrap for the red star. It is invisible as it doesn't contain any data
#rw{
position:absolute;left:0px;top:0px;
}
and this is the completed wrap