Was bored on a Friday and whipped up a fun little animated image using CSS:
It overlays multiple elements with the same background image rotated at different intervals. To align the images to the same plane and stitch them together each element is first rotated back (using the :before pseudo-element) then resized and positioned accordingly.
Then, by adding overflow: hidden; to the parent element, the image is cropped to the border-radius value of the pseudo-element and enables it to take a shape!
Since each image is technically in the same position but with a different parent the values for dimensions and positioning must be identical. This was slightly tricky as the height & width vary slightly with the different rotations (thanks to geometry), so the image needs to be stretched a bit.
You can see how this is handled here:
For the animation, it uses a simple keyframes rule to smoothly transition border-radius values. Each div has an animation-delay value to offset and create a directional effect.
Hope this was a good showcase of how easy it is to easily create complex animations using basic CSS/HTML!
Top comments (0)