fix: 优化浮动按钮显示效果和动画

- 优化按钮 hover 和 active 状态的动画效果
- 添加弹性缩放和阴影过渡动画
- 优化 tooltip 样式,使用毛玻璃效果和更好的阴影
- 改进按钮隐藏动画,添加 scale 变换
- 优化切换侧边栏按钮的出现动画
- 改进阅读进度按钮的进度条样式
- 统一动画时长和缓动函数
- 修复按钮 overflow 属性,防止内容溢出
This commit is contained in:
2026-01-12 16:40:49 +08:00
parent ff4c8460a2
commit 98f4fb08fa

149
style.css
View File

@@ -3118,29 +3118,19 @@ html.darkmode .wp-block-calendar tbody td {
/*浮动按钮栏 (回顶等)*/ /*浮动按钮栏 (回顶等)*/
#float_action_buttons { #float_action_buttons {
position: fixed; position: fixed;
bottom: 35px; bottom: 35px;
right: 20px; right: 20px;
height: max-content; height: max-content;
height: -moz-max-content;
z-index: 1000; z-index: 1000;
transition:
transition: all var(--animation-normal) var(--ease-standard); opacity var(--animation-normal) var(--ease-standard),
transform var(--animation-normal) var(--ease-standard);
} }
#float_action_buttons.fabtns-float-left { #float_action_buttons.fabtns-float-left {
left: 20px; left: 20px;
right: auto; right: auto;
} }
#float_action_buttons.fabtns-float-left .fabtn-show-on-right { #float_action_buttons.fabtns-float-left .fabtn-show-on-right {
@@ -3172,163 +3162,132 @@ html.is-home.banner-as-cover #float_action_buttons.hidden {
} }
.fabtn { .fabtn {
width: 42px; width: 42px;
height: 42px; height: 42px;
padding: 0; padding: 0;
overflow: hidden;
overflow: visible;
display: block !important; display: block !important;
margin-top: 8px; margin-top: 8px;
border: none !important; border: none !important;
transition:
transition: all var(--animation-normal) var(--ease-standard); background-color var(--animation-fast) var(--ease-standard),
color var(--animation-fast) var(--ease-standard),
transform var(--animation-fast) var(--ease-spring),
box-shadow var(--animation-fast) var(--ease-standard),
opacity var(--animation-fast) var(--ease-standard);
background-color: var(--color-foreground) !important; background-color: var(--color-foreground) !important;
color: var(--themecolor) !important; color: var(--themecolor) !important;
border-radius: 50%;
position: relative;
} }
.fabtn:hover { .fabtn:hover {
color: #fff !important; color: #fff !important;
background-color: var(--themecolor) !important; background-color: var(--themecolor) !important;
transform: translateY(-2px);
box-shadow:
0 4px 12px rgba(var(--themecolor-rgbstr), 0.3),
0 8px 24px rgba(var(--themecolor-rgbstr), 0.2) !important;
} }
.fabtn:active { .fabtn:active {
color: #fff !important; color: #fff !important;
background-color: var(--themecolor-dark) !important; background-color: var(--themecolor-dark) !important;
transform: translateY(0px) scale(0.95);
box-shadow:
0 2px 6px rgba(var(--themecolor-rgbstr), 0.2) !important;
} }
.fabtn.fabtn-hidden { .fabtn.fabtn-hidden {
height: 0 !important; height: 0 !important;
opacity: 0; opacity: 0;
margin-top: 0; margin-top: 0;
box-shadow: none; box-shadow: none;
pointer-events: none; pointer-events: none;
transform: scale(0);
} }
#fabtn_toggle_sides { #fabtn_toggle_sides {
height: 30px !important; height: 30px !important;
transform: translateY(8px) scale(0.9);
transform: translateY(8px);
opacity: 0; opacity: 0;
transition:
transform var(--animation-normal) var(--ease-emphasized-decelerate),
opacity var(--animation-normal) var(--ease-standard);
} }
#float_action_buttons:hover #fabtn_toggle_sides { #float_action_buttons:hover #fabtn_toggle_sides {
height: 30px !important; height: 30px !important;
transform: translateY(0px) scale(1);
transform: translateY(0px);
opacity: 1; opacity: 1;
} }
#fabtn_reading_progress { #fabtn_reading_progress {
height: 30px; height: 30px;
overflow: visible;
position: relative;
} }
#fabtn_reading_progress_bar { #fabtn_reading_progress_bar {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
border-radius: 50%;
border-radius: 4px;
background: var(--themecolor); background: var(--themecolor);
opacity: 0.15;
transition: width var(--animation-fast) var(--ease-standard);
}
opacity: 0.08; #fabtn_reading_progress_details {
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 600;
} }
#float_action_buttons .fabtn:before { #float_action_buttons .fabtn:before {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 50px; right: 50px;
line-height: 22px; line-height: 22px;
font-weight: 500;
font-weight: normal;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.85);
background: #32325d; backdrop-filter: blur(10px);
padding: 4px 12px;
padding: 3px 10px;
font-size: 12px; font-size: 12px;
border-radius: 6px;
border-radius: 3px; transition:
transform var(--animation-fast) var(--ease-emphasized-decelerate),
transition: all 0.3s ease; opacity var(--animation-fast) var(--ease-standard);
transform: translateX(8px);
transform: translateX(5px);
opacity: 0; opacity: 0;
white-space: nowrap;
width: max-content;
width: -moz-max-content;
text-transform: none; text-transform: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
html.darkmode #float_action_buttons .fabtn:before {
background: rgba(255, 255, 255, 0.9);
color: #000;
} }
#float_action_buttons .fabtn.fabtn-hidden:before { #float_action_buttons .fabtn.fabtn-hidden:before {
opacity: 0 !important; opacity: 0 !important;
display: none;
} }
#float_action_buttons.fabtns-float-left .fabtn:before { #float_action_buttons.fabtns-float-left .fabtn:before {
left: 50px; left: 50px;
right: unset; right: unset;
transform: translateX(-8px);
transform: translateX(-5px);
} }
#float_action_buttons .fabtn:hover:before { #float_action_buttons .fabtn:hover:before {
transform: translateX(0px); transform: translateX(0px);
opacity: 1;
opacity: 0.7;
} }
#float_action_buttons #fabtn_toggle_sides:before { #float_action_buttons #fabtn_toggle_sides:before {