45 lines
713 B
SCSS
45 lines
713 B
SCSS
|
.sparkles {
|
||
|
|
position: absolute;
|
||
|
|
top: var(--block-size);
|
||
|
|
height: 50px;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkle {
|
||
|
|
position: absolute;
|
||
|
|
color: rgba(152, 88, 255, 0.75);
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.8) rotate(0deg);
|
||
|
|
animation: pop ease 2000ms forwards, sparkle ease 500ms infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner-sparkle {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pop {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.8) rotate(0deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
transform: scale(1) rotate(72deg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: scale(0) rotate(360deg);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes sparkle {
|
||
|
|
0% {
|
||
|
|
color: rgba(152, 88, 255, 0.75);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
color: rgba(198, 162, 255, 0.75);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
color: rgba(152, 88, 255, 0.75);
|
||
|
|
}
|
||
|
|
}
|