This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Inspiration
June brings memories of my baby brother’s birthday; he turns 25 this year, no longer the little one he used to be.
Demo
Journey
Creating this CSS animation was a rewarding challenge that required a detailed understanding of various CSS properties and techniques. The process involved layering multiple elements to simulate a birthday cake with intricate shadow effects and a gift box animation.
Process:
Setup and Layout:
- Used flex for centering the main elements on the screen.
- Defined the base structure for the cake and the gift using basic CSS properties.
Cake Design:
- Utilized the box-shadow property creatively to add multiple layers to the cake.
- Applied pseudo-elements (::before and ::after) to add decorative parts like the white shadow and the number on the cake.
Gift Box Animation:
- Implemented a checkbox hack to control the animation state.
- Positioned the gift box and designed the ribbon using ::before and ::after.
- Used transition and transform properties to animate the gift opening effect.
Sparkles Animation:
- Created sparkles using small, circular elements with animated @keyframes to simulate a burst effect.
- Combined opacity, transform, and color animations for dynamic visual effects.
Top comments (0)