complete design overhaul
This commit is contained in:
parent
d033a08d87
commit
0a0bafa0ec
14 changed files with 505 additions and 160 deletions
|
|
@ -26,3 +26,65 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lila-pop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lila-shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lila-confetti {
|
||||
0% {
|
||||
transform: translate(var(--x0), var(--y0)) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(var(--x1), var(--y1)) rotate(540deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lila-pop {
|
||||
animation: lila-pop 220ms ease-out;
|
||||
}
|
||||
|
||||
.lila-shake {
|
||||
animation: lila-shake 260ms ease-in-out;
|
||||
}
|
||||
|
||||
.lila-confetti-piece {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
animation: lila-confetti 900ms ease-out forwards;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue