hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

cheap sparkle effect

Browse source
This commit is contained in:
Henry Jameson 2026-07-07 11:41:21 +03:00
commit 5bec7bf621
1 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/rich_content/rich_content.scss
View file

@ -16,6 +16,32 @@
animation-play-state: paused; animation-play-state: paused;
} }
&[data-mfm-operator="sparkle"] {
position: relative;
&::before,
&::after {
content: '✨';
position: absolute;
opacity: 0.4;
z-index: -1;
animation-name: cheap-sparkle;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
&::before {
left: 0;
animation-direction: alternate;
}
&::after {
right: 0;
animation-direction: alternate-reverse;
}
}
.emoji { .emoji {
/* Misskey's emoji width knows no bounds */ /* Misskey's emoji width knows no bounds */
/* stylelint-disable-next-line declaration-no-important */ /* stylelint-disable-next-line declaration-no-important */
@ -418,3 +444,15 @@ a .RichContent {
filter: hue-rotate(360deg)contrast(150%)saturate(150%) filter: hue-rotate(360deg)contrast(150%)saturate(150%)
} }
} }
@keyframes cheap-sparkle {
0% {
filter: hue-rotate()contrast(150%)saturate(150%);
transform: translateY(-0.5em);
}
100% {
filter: hue-rotate(360deg)contrast(150%)saturate(150%);
transform: translateY(0.5em);
}
}