Spaces:
Running
Running
generate glowing animation and hover animation for the shopping bag icon - Follow Up Deployment
Browse files- index.html +20 -1
index.html
CHANGED
|
@@ -294,6 +294,17 @@
|
|
| 294 |
10% { opacity: 1; }
|
| 295 |
100% { transform: translateY(-20px); opacity: 0; }
|
| 296 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 297 |
|
| 298 |
@keyframes float-1 {
|
| 299 |
0%, 100% { transform: translate(0, 0); }
|
|
@@ -347,7 +358,15 @@
|
|
| 347 |
<i class="fas fa-trophy text-niogold mr-2"></i>
|
| 348 |
<span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
|
| 349 |
<div class="h-5 w-px bg-gray-600 mx-2"></div>
|
| 350 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 351 |
</div>
|
| 352 |
|
| 353 |
<div class="ml-4 flex items-center">
|
|
|
|
| 294 |
10% { opacity: 1; }
|
| 295 |
100% { transform: translateY(-20px); opacity: 0; }
|
| 296 |
}
|
| 297 |
+
|
| 298 |
+
@keyframes iconGlow {
|
| 299 |
+
0% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5)); }
|
| 300 |
+
50% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.9)); }
|
| 301 |
+
100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.5)); }
|
| 302 |
+
}
|
| 303 |
+
|
| 304 |
+
@keyframes iconBounce {
|
| 305 |
+
0%, 100% { transform: translateY(0) scale(1); }
|
| 306 |
+
50% { transform: translateY(-3px) scale(1.1); }
|
| 307 |
+
}
|
| 308 |
|
| 309 |
@keyframes float-1 {
|
| 310 |
0%, 100% { transform: translate(0, 0); }
|
|
|
|
| 358 |
<i class="fas fa-trophy text-niogold mr-2"></i>
|
| 359 |
<span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
|
| 360 |
<div class="h-5 w-px bg-gray-600 mx-2"></div>
|
| 361 |
+
<div class="group relative">
|
| 362 |
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
| 363 |
+
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
| 364 |
+
</svg>
|
| 365 |
+
<div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div>
|
| 366 |
+
<div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
|
| 367 |
+
Shopping Cart
|
| 368 |
+
</div>
|
| 369 |
+
</div>
|
| 370 |
</div>
|
| 371 |
|
| 372 |
<div class="ml-4 flex items-center">
|