实现 SiYuan 按键的彩虹渐变效果,参考了 https://siyuannote.com/docs/article/1724628228
更新:适配写味主题,优化文字颜色
提醒:可以自行调节按钮大小,第二行 width 是宽度,第三行 height 是高度
#barWorkspace { width: 80px; height: 25px; border-radius: 12px !important; background: linear-gradient(90deg, #FF6B6B, #FF7757, #FFAB3D, #6BF178, #6DD3FF, #D7B5FE, #FFB5E1, #FF6B6B); background-size: 1600% 100%; animation: rainbowButton 12s linear infinite; user-select: none; transition: filter 0.3s ease; display: flex; align-items: center; justify-content: center; } #barWorkspace span.toolbar__text { font-size: 12px !important; font-weight: 600 !important; color: white !important; text-transform: none !important; } #barWorkspace svg.toolbar__svg { color: white !important; opacity: 1 !important; margin-top: 2.5px !important; } #barWorkspace:hover { filter: brightness(0.8); } #barWorkspace:active { filter: brightness(0.7); } @keyframes rainbowButton { 0% { background-position: 0% 0%; } 100% { background-position: -200% 0%; } }
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于