Bonchellon/Star-wars-card-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
Bonchellon
2026-01-26 15:21:40 +03:00
parent 934cb46128
commit a3b270fc62
2 changed files with 222 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
public/styles.css
View File

@ -842,6 +842,48 @@ html, body {
35% { transform: translate(var(--lunge-dx, 30px), var(--lunge-dy, -20px)) scale(1.15); filter: brightness(1.4); }
100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
/* Новая анимация: карта накладывается на цель */
.card-wrap.combat-lunge-overlay {
animation: combatLungeOverlay 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
.card-wrap.combat-lunge-overlay .card {
box-shadow: 0 0 40px rgba(255, 200, 0, 0.6), 0 0 80px rgba(255, 100, 0, 0.4);
}
@keyframes combatLungeOverlay {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
filter: brightness(1);
opacity: 1;
}
25% {
transform: translate(calc(var(--attack-dx, 0) * 0.6), calc(var(--attack-dy, 0) * 0.6)) scale(1.15) rotate(-3deg);
filter: brightness(1.4) drop-shadow(0 0 25px rgba(255, 200, 0, 0.7));
}
45% {
transform: translate(var(--attack-dx, 0), var(--attack-dy, 0)) scale(1.3) rotate(0deg);
filter: brightness(2) drop-shadow(0 0 40px rgba(255, 100, 0, 1));
z-index: 1001;
}
50% {
transform: translate(var(--attack-dx, 0), var(--attack-dy, 0)) scale(1.28) rotate(1deg);
filter: brightness(1.9) drop-shadow(0 0 35px rgba(255, 150, 0, 0.95));
}
55% {
transform: translate(var(--attack-dx, 0), var(--attack-dy, 0)) scale(1.25) rotate(-1deg);
filter: brightness(1.7) drop-shadow(0 0 30px rgba(255, 120, 0, 0.9));
}
100% {
transform: translate(0, 0) scale(1) rotate(0deg);
filter: brightness(1);
z-index: auto;
opacity: 1;
}
}
.card-wrap.combat-hit .card {
animation: combatHit 0.45s ease-out forwards;
}
@ -851,6 +893,66 @@ html, body {
40% { transform: scale(0.95); filter: brightness(1.2); }
100% { transform: scale(1); filter: brightness(1); }
}
/* Эффект удара - карта трясётся и подсвечивается */
.card-wrap.combat-hit-impact {
animation: combatHitImpact 0.35s ease-out forwards;
}
.card-wrap.combat-hit-impact .card {
box-shadow: 0 0 30px rgba(255, 50, 50, 0.8), 0 0 60px rgba(255, 100, 100, 0.5);
}
@keyframes combatHitImpact {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
filter: brightness(1);
}
8% {
transform: translate(-4px, -3px) scale(1.08) rotate(-3deg);
filter: brightness(2.8) saturate(1.3);
}
16% {
transform: translate(4px, 3px) scale(1.08) rotate(3deg);
filter: brightness(3) saturate(1.4);
}
24% {
transform: translate(-3px, 2px) scale(1.05) rotate(-2deg);
filter: brightness(2.5) saturate(1.2);
}
32% {
transform: translate(3px, -2px) scale(1.05) rotate(2deg);
filter: brightness(2.7) saturate(1.3);
}
40% {
transform: translate(-2px, 1px) scale(1.03) rotate(-1deg);
filter: brightness(2.2) saturate(1.1);
}
48% {
transform: translate(2px, -1px) scale(1.03) rotate(1deg);
filter: brightness(2.4) saturate(1.2);
}
56% {
transform: translate(-1px, 0) scale(1.02) rotate(-0.5deg);
filter: brightness(2) saturate(1.05);
}
64% {
transform: translate(1px, 0) scale(1.02) rotate(0.5deg);
filter: brightness(1.8) saturate(1.1);
}
72% {
transform: translate(0, 0) scale(1.01) rotate(0deg);
filter: brightness(1.5) saturate(1.05);
}
80% {
transform: translate(0, 0) scale(1.005) rotate(0deg);
filter: brightness(1.2) saturate(1.02);
}
100% {
transform: translate(0, 0) scale(1) rotate(0deg);
filter: brightness(1) saturate(1);
}
}
.card-wrap.combat-death .card {
animation: combatDeath 0.4s ease-in forwards;
}