aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a visual sparkle effect for new news updates on the Erling Haaland media outlet

Browse Source 
Introduces a new API endpoint `/api/articles` and implements a client-side animation to visually alert users of new articles on the 'erling-haaland' outlet using CSS keyframes and conditional rendering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d9e77062-eeec-4c95-9131-905f69a78072
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/d9e77062-eeec-4c95-9131-905f69a78072/VftcvwB
This commit is contained in:
kimjaehyeon0101
2025-10-01 06:07:35 +00:00
parent b5e8cf3d3a
commit 0eee17a43e
5 changed files with 86 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/index.css
View File

@ -137,11 +137,49 @@
animation: float 3s ease-in-out infinite;
}
@keyframes sparkle {
0% {
opacity: 0;
transform: translate(0, 0) scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(168, 85, 247, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(168, 85, 247, 0.5);
}
}
.animate-glow-pulse {
animation: glow-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.animate-float {
animation: none;
}
.animate-glow-pulse {
animation: none;
}
}
.card-hover:hover {