Do you have similar projects?

Question

css

Hello! What is the smartest way to implement this? According to the idea, stripes and blue dots should rotate in different directions, make up with keyframes? Or is there already a library to implement this?

Answer 1

What is the smartest way to implement this? According to the idea, stripes and blue dots should rotate in different directions, make up with keyframes?

1. Draw all those arcs, points and icons in SVG.
2. Animate the arcs and points using transform:rotate and keyframes (rotation from 0 to 1turn, there is nothing very confusing in this, but I will leave an example for study), each set its own full rotation time to taste.
3. Windows icons, buckets and ayosi are twisted back and forth (as in this example ). Rotate the wrapper in one direction and the icon in the other - it will look like they are flying in a circle.

Answer 2

I would do the same on Crafty.js : inheritance and rotation are easy to do there , and all this can be done with DOM objects without using Canvas (to set styles in CSS the old fashioned way).

Answer 3

So try to do it yourself on both pure css and svg. An interesting experience, in my opinion.
Google css animations, svg animations. Then everything is on your own. And pull up technology, and information search skills.