|
61 | 61 | height: min(70vh, 560px); |
62 | 62 | opacity: 0.94; |
63 | 63 | filter: blur(4.5px); |
64 | | - animation: stripeDrift 4.8s cubic-bezier(0.38, 0.05, 0.24, 0.98) infinite; |
| 64 | + animation: stripeDrift 5.52s cubic-bezier(0.38, 0.05, 0.24, 0.98) infinite; |
65 | 65 | will-change: transform; |
66 | 66 | overflow: visible; |
67 | 67 | } |
|
79 | 79 | stroke-width: 76; |
80 | 80 | opacity: 0.88; |
81 | 81 | filter: drop-shadow(0 0 8px rgba(29, 78, 216, 0.36)); |
82 | | - animation: stripeWaveOne 2.9s ease-in-out infinite; |
| 82 | + animation: stripeWaveOne 3.34s ease-in-out infinite; |
83 | 83 | } |
84 | 84 |
|
85 | 85 | .stripe-2 { |
86 | 86 | stroke: url(#stripePurple); |
87 | 87 | stroke-width: 58; |
88 | 88 | opacity: 0.8; |
89 | 89 | filter: drop-shadow(0 0 10px rgba(109, 40, 217, 0.3)); |
90 | | - animation: stripeWaveTwo 3.25s ease-in-out infinite; |
| 90 | + animation: stripeWaveTwo 3.74s ease-in-out infinite; |
91 | 91 | } |
92 | 92 |
|
93 | 93 | .stripe-3 { |
94 | 94 | stroke: url(#stripeSky); |
95 | 95 | stroke-width: 40; |
96 | 96 | opacity: 0.68; |
97 | 97 | filter: drop-shadow(0 0 9px rgba(59, 130, 246, 0.28)); |
98 | | - animation: stripeWaveThree 2.6s ease-in-out infinite; |
| 98 | + animation: stripeWaveThree 2.99s ease-in-out infinite; |
99 | 99 | } |
100 | 100 |
|
101 | 101 | .stripe-4 { |
102 | 102 | stroke: url(#stripeHighlight); |
103 | 103 | stroke-width: 20; |
104 | 104 | opacity: 0.58; |
105 | 105 | filter: drop-shadow(0 0 8px rgba(219, 234, 254, 0.45)); |
106 | | - animation: stripeWaveFour 2.2s ease-in-out infinite; |
| 106 | + animation: stripeWaveFour 2.53s ease-in-out infinite; |
107 | 107 | } |
108 | 108 |
|
109 | 109 | .stripe-5 { |
110 | 110 | stroke: url(#stripeYellow); |
111 | 111 | stroke-width: 35; |
112 | | - opacity: 0.85; |
113 | | - filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.36)); |
114 | | - animation: stripeWaveOne 3.1s ease-in-out infinite; |
| 112 | + opacity: 0.9; |
| 113 | + filter: drop-shadow(0 0 10px rgba(255, 220, 0, 0.45)); |
| 114 | + animation: stripeWaveOne 3.57s ease-in-out infinite; |
115 | 115 | } |
116 | 116 |
|
117 | 117 | .stripe-6 { |
118 | 118 | stroke: url(#stripeRed); |
119 | 119 | stroke-width: 25; |
120 | 120 | opacity: 0.75; |
121 | | - filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3)); |
122 | | - animation: stripeWaveTwo 2.8s ease-in-out infinite; |
| 121 | + filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.3)); |
| 122 | + animation: stripeWaveTwo 3.22s ease-in-out infinite; |
123 | 123 | } |
124 | 124 |
|
125 | 125 | .stripe-7 { |
126 | 126 | stroke: url(#stripeSky); |
127 | 127 | stroke-width: 15; |
128 | 128 | opacity: 0.65; |
129 | 129 | filter: drop-shadow(0 0 9px rgba(59, 130, 246, 0.28)); |
130 | | - animation: stripeWaveThree 3.4s ease-in-out infinite; |
| 130 | + animation: stripeWaveThree 3.91s ease-in-out infinite; |
131 | 131 | } |
132 | 132 |
|
133 | 133 | .stripe-8 { |
134 | 134 | stroke: url(#stripeHighlight); |
135 | 135 | stroke-width: 8; |
136 | 136 | opacity: 0.55; |
137 | 137 | filter: drop-shadow(0 0 8px rgba(219, 234, 254, 0.45)); |
138 | | - animation: stripeWaveFour 2.5s ease-in-out infinite; |
| 138 | + animation: stripeWaveFour 2.88s ease-in-out infinite; |
139 | 139 | } |
140 | 140 |
|
141 | 141 | .corner-glow { |
|
184 | 184 | } |
185 | 185 |
|
186 | 186 | 50% { |
187 | | - transform: translate3d(-40px, 28px, 0) scale(1.09); |
| 187 | + transform: translate3d(-48px, 34px, 0) scale(1.11); |
188 | 188 | } |
189 | 189 | } |
190 | 190 |
|
191 | 191 | @@keyframes stripeWaveOne { |
192 | 192 | 0%, 100% { |
193 | | - transform: rotate(-0.4deg) translateY(0); |
| 193 | + transform: rotate(-0.48deg) translateY(0); |
194 | 194 | } |
195 | 195 |
|
196 | 196 | 50% { |
197 | | - transform: rotate(1.35deg) translateY(10px); |
| 197 | + transform: rotate(1.62deg) translateY(12px); |
198 | 198 | } |
199 | 199 | } |
200 | 200 |
|
201 | 201 | @@keyframes stripeWaveTwo { |
202 | 202 | 0%, 100% { |
203 | | - transform: rotate(0.3deg) translateY(0); |
| 203 | + transform: rotate(0.36deg) translateY(0); |
204 | 204 | } |
205 | 205 |
|
206 | 206 | 50% { |
207 | | - transform: rotate(-1.05deg) translateY(-10px); |
| 207 | + transform: rotate(-1.26deg) translateY(-12px); |
208 | 208 | } |
209 | 209 | } |
210 | 210 |
|
211 | 211 | @@keyframes stripeWaveThree { |
212 | 212 | 0%, 100% { |
213 | | - transform: rotate(-0.25deg) translateY(0); |
| 213 | + transform: rotate(-0.3deg) translateY(0); |
214 | 214 | } |
215 | 215 |
|
216 | 216 | 50% { |
217 | | - transform: rotate(1.5deg) translateY(12px); |
| 217 | + transform: rotate(1.8deg) translateY(14.4px); |
218 | 218 | } |
219 | 219 | } |
220 | 220 |
|
|
224 | 224 | } |
225 | 225 |
|
226 | 226 | 50% { |
227 | | - transform: rotate(-1.8deg) translateY(-14px); |
| 227 | + transform: rotate(-2.16deg) translateY(-16.8px); |
228 | 228 | } |
229 | 229 | } |
230 | 230 |
|
|
445 | 445 | <stop offset="100%" stop-color="rgba(191, 219, 254, 0.42)" /> |
446 | 446 | </linearGradient> |
447 | 447 | <linearGradient id="stripeYellow" x1="0%" y1="0%" x2="100%" y2="100%"> |
448 | | - <stop offset="0%" stop-color="rgba(253, 224, 71, 0.9)" /> |
449 | | - <stop offset="52%" stop-color="rgba(234, 179, 8, 0.9)" /> |
450 | | - <stop offset="100%" stop-color="rgba(202, 138, 4, 0.86)" /> |
| 448 | + <stop offset="0%" stop-color="rgba(255, 245, 0, 1)" /> |
| 449 | + <stop offset="52%" stop-color="rgba(255, 220, 0, 1)" /> |
| 450 | + <stop offset="100%" stop-color="rgba(250, 200, 0, 0.95)" /> |
451 | 451 | </linearGradient> |
452 | 452 | <linearGradient id="stripeRed" x1="6%" y1="8%" x2="100%" y2="92%"> |
453 | | - <stop offset="0%" stop-color="rgba(252, 165, 165, 0.82)" /> |
454 | | - <stop offset="52%" stop-color="rgba(239, 68, 68, 0.9)" /> |
455 | | - <stop offset="100%" stop-color="rgba(185, 28, 28, 0.8)" /> |
| 453 | + <stop offset="0%" stop-color="rgba(134, 239, 172, 0.9)" /> |
| 454 | + <stop offset="52%" stop-color="rgba(74, 222, 128, 0.92)" /> |
| 455 | + <stop offset="100%" stop-color="rgba(34, 197, 94, 0.85)" /> |
456 | 456 | </linearGradient> |
457 | 457 | </defs> |
458 | 458 | <path class="stripe stripe-1" d="M 120 -180 C 390 72 470 204 740 510" /> |
|
0 commit comments