juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 09:03:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(styles): 优化彩虹模式动画效果并简化实现

Browse Source 
- 将 backdrop-filter 改为 filter 以获得更好的性能
- 添加反向旋转动画以保持媒体元素原始颜色
- 移除不必要的伪元素和定位样式
This commit is contained in:
二叉树树
2026-01-03 20:33:46 +08:00
parent 05510702f4
commit da48925fff
1 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/styles/main.css
View File

@@ -2,32 +2,27 @@
@layer components { @layer components {
/* Rainbow Mode Animation */ /* Rainbow Mode Animation */
@keyframes rainbow-backdrop { @keyframes rainbow-rotate {
0% { backdrop-filter: hue-rotate(0deg); } 0% { filter: hue-rotate(0deg); }
100% { backdrop-filter: hue-rotate(360deg); } 100% { filter: hue-rotate(360deg); }
}
@keyframes rainbow-rotate-reverse {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(-360deg); }
} }
html.is-rainbow-mode .card-base { html.is-rainbow-mode .card-base {
position: relative; animation: rainbow-rotate linear infinite;
}
html.is-rainbow-mode .card-base::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
animation: rainbow-backdrop linear infinite;
animation-duration: var(--rainbow-duration, 5s); animation-duration: var(--rainbow-duration, 5s);
} }
/* Protect images and other sensitive media from color rotation */ /* Reverse filter for images to keep original colors */
html.is-rainbow-mode .card-base img, html.is-rainbow-mode .card-base img,
html.is-rainbow-mode .card-base video, html.is-rainbow-mode .card-base video,
html.is-rainbow-mode .card-base iframe { html.is-rainbow-mode .card-base iframe,
position: relative; html.is-rainbow-mode .card-base .no-hue-rotate {
z-index: 2; animation: rainbow-rotate-reverse linear infinite;
animation-duration: var(--rainbow-duration, 5s);
} }
.card-base { .card-base {