github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-09-14 06:50:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

New animation next-bounce

Browse Source
This commit is contained in:
Mimi 2026-08-25 01:36:07 +08:00
parent 6468f139cb
commit 6037f68b7a
1 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
source/css/_common/components/post/post-reward.styl
View File

@ -28,11 +28,21 @@
} }
if (hexo-config('reward_settings.animation')) { if (hexo-config('reward_settings.animation')) {
span {
transform-origin: center bottom;
}
&:hover span { &:hover span {
animation: next-roll .1s infinite linear; animation: next-bounce 1.4s infinite ease-in-out;
// The animation may affect :hover of img in dark mode // The animation may affect :hover of img in dark mode
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: reduce) {
&:hover span {
animation: none;
}
}
} }
} }
@ -44,12 +54,28 @@
} }
} }
@keyframes next-roll { @keyframes next-bounce {
from { 0%, 100% {
transform: rotateZ(30deg); transform: translateY(0) scale(1);
} }
to { 12% {
transform: rotateZ(-30deg); transform: translateY(0) scale(1.04, .96);
}
36% {
transform: translateY(-7px) scale(.98, 1.02);
}
58% {
transform: translateY(0) scale(1.03, .97);
}
72% {
transform: translateY(-2px) scale(1);
}
84% {
transform: translateY(0) scale(1);
} }
} }