CSS Diamonds and Hearts

[The Professor]

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

 

[Linda]

Nice work. That looks like an awful lot of code to accomplish that. It must take pages and pages of code to make a simple movie, like we used to do with the ming swf codes. There you could draw, position and animate all in one language. I don't know why they retired the Flash application. A lot of games on the web are no longer available, and the HTML5 games that replaced them are not as sophisticated.