Summary
Highlights
Each square is given a unique ID (s0, s1, etc.). New keyframes (a1, a2, etc.) are created for each square, with each animation rotating the square by a progressively smaller degree (e.g., a0 rotates 180 degrees, a1 rotates 160 degrees, a2 rotates 140 degrees). This creates the desired radial effect.
The video starts by introducing the 100dayscss.com website and the specific challenge for the day: creating a rotating star animation from squares that transform into circles. The goal is to walk through the process step-by-step, explaining the CSS techniques involved.
The tutorial uses a provided template on the 100 Days CSS website, which includes a 'frame' and 'center' class. The initial step is to create a single square div with the class 'square' and style it with a width, height, and a black solid border. This square is positioned in the center.
To animate the square, CSS keyframes are introduced. An animation named 'a0' is created to rotate the square 180 degrees and transform it into an oval by changing its height and setting a border-radius of 50% at the 50% mark of the animation. The animation duration is set to 3 seconds and to loop infinitely.
To add multiple squares that animate independently, the 'position' property of the squares is changed to 'absolute'. This makes the squares stack on top of each other, allowing for independent animation without affecting document flow. Initial centering issues are noted.
The video demonstrates adding more squares and corresponding keyframe animations to create a fuller, more complex star shape. By continuing to decrement the rotation degree for each new square, a circular, star-like motion is achieved. The presenter adds squares up to 's9'.
To fix a perceived 'jumping' issue in the animation and improve centering, the existing 'frame' and 'center' classes' positioning is revamped. A new 'wrapper' div is introduced, styled with Flexbox ('display: flex', 'justify-content: center', 'align-items: center') to properly center the animation on the page. This also resolves the animation's vertical displacement.
The completed animation is presented, showcasing a dynamic star built entirely with CSS. The video concludes by encouraging viewers to customize the animation further by adding more squares, altering degree values, and experimenting with colors and other properties.