Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-16 08:00:52 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Animate special points

Browse Source
This commit is contained in:
Andrio Celos 2023-07-13 10:31:54 +10:00
parent 86ca6feb66
commit b486738ea8
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
TableturfBattleClient/tableturf.css
View File

@ -932,7 +932,7 @@ dialog::backdrop {
.playerBar .specialPoint {
position: relative;
color: transparent;
background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
}
.playerBar .specialPoint.specialAnimation {
background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
@ -950,6 +950,25 @@ dialog::backdrop {
margin-right: 0.5em;
}
.playerBar .specialPoint:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 100%;
outline: 2px solid var(--special-accent-colour);
animation: 333ms linear forwards specialPointRing;
}
@keyframes specialPointRing {
from { outline-offset: 1em; }
66% { outline-offset: -0.5em; background: transparent; }
67% { left: 0; top: 0; right: 0; bottom: 0; background: var(--special-accent-colour); }
to { left: 50%; top: 50%; right: 50%; bottom: 50%; background: var(--special-accent-colour); visibility: hidden; }
}
.result {
font-family: 'Splatoon 1';
color: var(--colour);