Flower UI is a collection of beautiful, animated flower components created with pure CSS. This project showcases the power of CSS animations and transformations to create realistic, interactive flower designs.
- Pure CSS Implementations - No JavaScript or external libraries required
- Responsive Design - Looks great on all devices
- Smooth Animations - Beautiful petal animations and falling leaf effects
- Multiple Flower Styles - Different designs to choose from
The repository contains two flower implementations:
A single animated flower with falling petals positioned above a grass background.
A more complex implementation featuring multiple flowers in a vase, each with its own animations and falling petals.
-
Clone this repository:
git clone https://github.com/akosikhada/flower-ui.git
-
Open any of the examples in your browser:
flower-1/index.htmlflower-2/index.html
-
To use these components in your own project, copy the relevant HTML structure and CSS styles.
The flowers can be easily customized by modifying the CSS variables in the respective style files:
- Change colors of petals, stems, and vases
- Adjust animation timing and effects
- Modify sizes to fit your design needs