Spinning Flower Animations with plain Javascript and CSS!

I made some spinning flower animations just for fun, that was a learning experience! I used some loops and arrays to accomplish this, and I am excited I got it to work. I hope you find these as fun as I do! I am excited to make more in the future. I ALMOST gave up on this. Glad I didn't!

annavi11arrea1.github.io

This project was a bit of a journey, I struggled with getting the javascript and css to align just right. Lots of digging!

I was very happy when I was finally able to get my array of objects appended to the DOM properly with css styling applied.

I then had to figure out how to get them aligned on top of each other.

After some massive tinkering, I finally got them to align. NEVER TO FORGET AGAIN!!! XD

And after I got everything appearing and aligned, I was able to make a fun spinning flower animation with transitioning colors and positions.

It took me a little over a day to figure this out. If you are a beginner like me I encourage you to check out my code and see if you can figure out whats up! It's really awesome to build a thing and have it work. YAY! Here you go:

codesandbox.io

The above is the detailed content of Spinning Flower Animations with plain Javascript and CSS!. For more information, please follow other related articles on the PHP Chinese website!