+- TandemTables Forum (http://tandemtables.com/forum)
+-- Forum: Tandem Trends (/forumdisplay.php?fid=1)
+--- Forum: Code (/forumdisplay.php?fid=3)
+--- Thread: CSS Diamonds and Hearts (/showthread.php?tid=19825)
CSS Diamonds and Hearts - The Professor - 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
RE: CSS Diamonds and Hearts - Linda - 08-26-2022 02:27 PM
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.