ProjectGenesis commited on
Commit
4718251
·
verified ·
1 Parent(s): 8c13fae

generate glowing animation and hover animation for the shopping bag icon - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. 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
- <i class="fas fa-shopping-bag text-black glow-text animate-[pulseGlow_2s_ease-in-out_infinite] hover:animate-[magnify_0.5s_ease-in-out] cursor-pointer"></i>
 
 
 
 
 
 
 
 
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">