Pure CSS Flower animation snippet

Utilities Bootstrap 5Free+ CSS

Pure CSS Flower animation snippet — a free Bootstrap 5 utility snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

13.5k views290 downloads5 years ago

gosnippets.com/preview/pure-css-flower-animation-snippet

Source Code

1<div class="flower">
2  <div class="leaf"></div>
3  <div class="leaf"></div>
4  <div class="leaf"></div>
5  <div class="leaf"></div>
6  <div class="leaf"></div>
7  <div class="leaf"></div>
8  <div class="leaf"></div>
9  <div class="leaf"></div>
10  <div class="leaf"></div>
11  <div class="leaf"></div>
12  <div class="leaf"></div>
13  <div class="leaf"></div>
14  <div class="leaf"></div>
15  <div class="leaf"></div>
16  <div class="leaf"></div>
17  <div class="leaf"></div>
18  <div class="leaf"></div>
19  <div class="leaf"></div>
20  <div class="leaf"></div>
21  <div class="leaf"></div>
22  <div class="leaf"></div>
23  <div class="leaf"></div>
24  <div class="leaf"></div>
25  <div class="leaf"></div>
26  <div class="leaf"></div>
27  <div class="leaf"></div>
28  <div class="leaf"></div>
29  <div class="leaf"></div>
30  <div class="leaf"></div>
31  <div class="leaf"></div>
32  <div class="leaf"></div>
33  <div class="leaf"></div>
34  <div class="leaf"></div>
35  <div class="leaf"></div>
36  <div class="leaf"></div>
37  <div class="leaf"></div>
38  <div class="leaf"></div>
39  <div class="leaf"></div>
40  <div class="leaf"></div>
41  <div class="leaf"></div>
42  <div class="leaf"></div>
43  <div class="leaf"></div>
44  <div class="leaf"></div>
45  <div class="leaf"></div>
46  <div class="leaf"></div>
47  <div class="leaf"></div>
48  <div class="leaf"></div>
49  <div class="leaf"></div>
50  <div class="leaf"></div>
51  <div class="leaf"></div>
52  <div class="leaf"></div>
53  <div class="leaf"></div>
54  <div class="leaf"></div>
55  <div class="leaf"></div>
56  <div class="leaf"></div>
57  <div class="leaf"></div>
58  <div class="leaf"></div>
59  <div class="leaf"></div>
60  <div class="leaf"></div>
61  <div class="leaf"></div>
62</div>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="flower"> 2 <div class="leaf"></div> 3 <div class="leaf"></div> 4 <div class="leaf"></div> 5 <div class="leaf"></div> 6 <div class="leaf"></div> 7 <div class="leaf"></div> 8 <div class="leaf"></div> 9 <div class="leaf"></div> 10 <div class="leaf"></div> 11 <div class="leaf"></div> 12 <div class="leaf"></div> 13 <div class="leaf"></div> 14 <div class="leaf"></div> 15 <div class="leaf"></div> 16 <div class="leaf"></div> 17 <div class="leaf"></div> 18 <div class="leaf"></div> 19 <div class="leaf"></div> 20 <div class="leaf"></div> 21 <div class="leaf"></div> 22 <div class="leaf"></div> 23 <div class="leaf"></div> 24 <div class="leaf"></div> 25 <div class="leaf"></div> 26 <div class="leaf"></div> 27 <div class="leaf"></div> 28 <div class="leaf"></div> 29 <div class="leaf"></div> 30 <div class="leaf"></div> 31 <div class="leaf"></div> 32 <div class="leaf"></div> 33 <div class="leaf"></div> 34 <div class="leaf"></div> 35 <div class="leaf"></div> 36 <div class="leaf"></div> 37 <div class="leaf"></div> 38 <div class="leaf"></div> 39 <div class="leaf"></div> 40 <div class="leaf"></div> 41 <div class="leaf"></div> 42 <div class="leaf"></div> 43 <div class="leaf"></div> 44 <div class="leaf"></div> 45 <div class="leaf"></div> 46 <div class="leaf"></div> 47 <div class="leaf"></div> 48 <div class="leaf"></div> 49 <div class="leaf"></div> 50 <div class="leaf"></div> 51 <div class="leaf"></div> 52 <div class="leaf"></div> 53 <div class="leaf"></div> 54 <div class="leaf"></div> 55 <div class="leaf"></div> 56 <div class="leaf"></div> 57 <div class="leaf"></div> 58 <div class="leaf"></div> 59 <div class="leaf"></div> 60 <div class="leaf"></div> 61 <div class="leaf"></div> 62</div>