85 lines
1.2 KiB
SCSS
85 lines
1.2 KiB
SCSS
.root {
|
|
position: relative;
|
|
}
|
|
|
|
.number {
|
|
--digit-offset: 0;
|
|
--digit-offset-x: calc(8rem * var(--digit-offset) * 0.75);
|
|
|
|
position: absolute;
|
|
width: 8rem;
|
|
height: 8rem;
|
|
z-index: 2;
|
|
|
|
transform: scale(0);
|
|
top: 50%;
|
|
left: calc(10% + var(--digit-offset-x));
|
|
offset-path: path('M 0 0 C 128 -46 99 -376 93 -529');
|
|
offset-anchor: center;
|
|
offset-rotate: 0deg;
|
|
|
|
pointer-events: none;
|
|
|
|
animation:
|
|
2.75s float 0.25s,
|
|
2s show-up calc(var(--digit-offset) * 0.5s),
|
|
1s dissapear 2s;
|
|
animation-timing-function: ease-in;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.shiftOrigin {
|
|
transform-origin: left;
|
|
}
|
|
|
|
.effect {
|
|
position: absolute;
|
|
top: calc(50% - 1rem);
|
|
left: 10rem;
|
|
transform: translate(-50%, -50%) scaleX(-1);
|
|
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
width: 18rem;
|
|
height: 18rem;
|
|
}
|
|
|
|
.giftIcon {
|
|
margin-inline-end: -0.375rem;
|
|
}
|
|
|
|
@keyframes show-up {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(50%);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes dissapear {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
from {
|
|
offset-distance: 0%;
|
|
}
|
|
|
|
to {
|
|
offset-distance: 100%;
|
|
}
|
|
}
|