ai/card
1
0
Fork 0
Code Activity

Fix page width overflow issue and remove Favorite Card heading

Browse Source 
- Reduce excessive scale values in animations (scale(50) → scale(3), scale(8) → scale(2.5))
- Add overflow: hidden to card-wrapper to prevent animation overflow
- Remove "Favorite Card" heading from user page
- Fix page width expanding issue caused by large-scale animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
syui
2025-07-18 15:12:31 +09:00
parent 4862afe8d6
commit 8aec22cc86
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/pages/UserPage.tsx
View File

@@ -63,7 +63,6 @@ export default function UserPage() {
if (favCard) { if (favCard) {
return ( return (
<div className="mb-8"> <div className="mb-8">
<h2 className="text-xl font-bold mb-4 text-center">Favorite Card</h2>
<div className="flex justify-center"> <div className="flex justify-center">
<SpecialCard card={favCard} /> <SpecialCard card={favCard} />
</div> </div>

19
src/styles/card-effects.css
View File

@@ -7,6 +7,7 @@
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
margin: 0 auto; margin: 0 auto;
overflow: hidden;
} }
.card-reflection { .card-reflection {
@@ -39,8 +40,8 @@
@keyframes reflection { @keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; } 0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; } 81% { transform: scale(2) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; } 100% { transform: scale(3) rotate(45deg); opacity: 0; }
} }
.card-status { .card-status {
@@ -291,13 +292,13 @@
} }
@keyframes holographic-sweep { @keyframes holographic-sweep {
0% { transform: scale(0) rotate(45deg) translateX(-200px); opacity: 0; } 0% { transform: scale(0) rotate(45deg) translateX(-50px); opacity: 0; }
10% { transform: scale(0) rotate(45deg) translateX(-200px); opacity: 0; } 10% { transform: scale(0) rotate(45deg) translateX(-50px); opacity: 0; }
15% { transform: scale(2) rotate(45deg) translateX(-100px); opacity: 0.6; } 15% { transform: scale(1) rotate(45deg) translateX(-25px); opacity: 0.6; }
20% { transform: scale(4) rotate(45deg) translateX(0px); opacity: 1; } 20% { transform: scale(1.5) rotate(45deg) translateX(0px); opacity: 1; }
25% { transform: scale(6) rotate(45deg) translateX(100px); opacity: 0.8; } 25% { transform: scale(2) rotate(45deg) translateX(25px); opacity: 0.8; }
30% { transform: scale(8) rotate(45deg) translateX(200px); opacity: 0; } 30% { transform: scale(2.5) rotate(45deg) translateX(50px); opacity: 0; }
100% { transform: scale(0) rotate(45deg) translateX(300px); opacity: 0; } 100% { transform: scale(0) rotate(45deg) translateX(75px); opacity: 0; }
} }
/* Rainbow shimmer effect for special cards */ /* Rainbow shimmer effect for special cards */