File size: 1,456 Bytes
0ee0725 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* CSS for flower background animations */
.flower-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.1;
}
.flower-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.flower-particles::before {
content: '🌸';
position: absolute;
top: 10%;
left: 5%;
font-size: 1.5em;
animation: float 8s ease-in-out infinite;
}
.flower-particles::after {
content: '🌺';
position: absolute;
top: 70%;
right: 10%;
font-size: 1.2em;
animation: float 6s ease-in-out infinite reverse;
}
/* Additional floating flowers */
.flower-extra {
position: fixed;
top: 40%;
left: 80%;
font-size: 1.8em;
animation: float 7s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
.flower-extra::before {
content: '🌷';
}
.flower-extra2 {
position: fixed;
top: 80%;
left: 20%;
font-size: 1.3em;
animation: float 5s ease-in-out infinite reverse;
z-index: -1;
pointer-events: none;
}
.flower-extra2::before {
content: '🌻';
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 1;
}
}
|