From 8c2417a9f199e2ac1d741f7010f47da8217c8f97 Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Fri, 16 Jan 2026 15:37:46 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E4=BA=AB?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E9=9D=A2=E6=9D=BF=E6=97=A0=E6=B3=95=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除 overflow:hidden 避免裁剪分享面板 - 改用 translateY + opacity 实现上滑淡出/淡入效果 - 桌面端：分享按钮上滑淡出，分享渠道从下方滑入 - 移动端：保持弹窗式布局，按钮旋转45度 - 优化动画时序，更加流畅自然 --- style.css | 72 +++++++++++++++++++++++-------------------------------- 1 file changed, 30 insertions(+), 42 deletions(-) diff --git a/style.css b/style.css index a335959..2ce4501 100644 --- a/style.css +++ b/style.css @@ -8229,8 +8229,6 @@ body.noscroll:before { position: relative; display: inline-flex; align-items: flex-end; - overflow: hidden; - border-radius: 10px; } #comments_toggle { @@ -8262,14 +8260,6 @@ body.noscroll:before { font-size: 14px; } -/* 分享按钮和面板共用过渡 */ -#share, -#share_show { - transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); - will-change: transform, opacity; -} - /* 分享按钮 - 默认显示 */ #share_show { position: relative; @@ -8283,6 +8273,8 @@ body.noscroll:before { border-color: var(--themecolor) !important; transform: translateY(0); opacity: 1; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } #share_show:hover { @@ -8295,7 +8287,7 @@ body.noscroll:before { border-color: var(--themecolor-dark2) !important; } -/* 分享面板 - 默认隐藏在下方 */ +/* 分享面板 - 默认隐藏 */ #share { position: absolute; bottom: 0; @@ -8303,27 +8295,29 @@ body.noscroll:before { display: flex; flex-direction: row; gap: 6px; - transform: translateY(100%); + transform: translateY(15px); opacity: 0; pointer-events: none; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); } -/* 分享渠道按钮 */ +/* 分享渠道按钮初始状态 */ #share > a { opacity: 0; - transform: translateY(20px); + transform: translateY(10px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), - opacity 0.25s ease-out; + opacity 0.2s ease-out; } -/* 展开状态 - 分享按钮上滑退出 */ +/* 展开状态 - 分享按钮上滑淡出 */ #share_container.opened #share_show { - transform: translateY(-100%); + transform: translateY(-15px); opacity: 0; pointer-events: none; } -/* 展开状态 - 分享面板从下方滑入 */ +/* 展开状态 - 分享面板上滑淡入 */ #share_container.opened #share { transform: translateY(0); opacity: 1; @@ -8336,24 +8330,24 @@ body.noscroll:before { transform: translateY(0); } -#share_container.opened #share > a:nth-child(1) { transition-delay: 50ms; } -#share_container.opened #share > a:nth-child(2) { transition-delay: 80ms; } -#share_container.opened #share > a:nth-child(3) { transition-delay: 110ms; } -#share_container.opened #share > a:nth-child(4) { transition-delay: 140ms; } -#share_container.opened #share > a:nth-child(5) { transition-delay: 170ms; } -#share_container.opened #share > a:nth-child(6) { transition-delay: 200ms; } -#share_container.opened #share > a:nth-child(7) { transition-delay: 230ms; } -#share_container.opened #share > a:nth-child(8) { transition-delay: 260ms; } +#share_container.opened #share > a:nth-child(1) { transition-delay: 30ms; } +#share_container.opened #share > a:nth-child(2) { transition-delay: 60ms; } +#share_container.opened #share > a:nth-child(3) { transition-delay: 90ms; } +#share_container.opened #share > a:nth-child(4) { transition-delay: 120ms; } +#share_container.opened #share > a:nth-child(5) { transition-delay: 150ms; } +#share_container.opened #share > a:nth-child(6) { transition-delay: 180ms; } +#share_container.opened #share > a:nth-child(7) { transition-delay: 210ms; } +#share_container.opened #share > a:nth-child(8) { transition-delay: 240ms; } /* 收起时各按钮错落滑出 */ #share_container:not(.opened) #share > a:nth-child(8) { transition-delay: 0ms; } -#share_container:not(.opened) #share > a:nth-child(7) { transition-delay: 20ms; } -#share_container:not(.opened) #share > a:nth-child(6) { transition-delay: 40ms; } -#share_container:not(.opened) #share > a:nth-child(5) { transition-delay: 60ms; } -#share_container:not(.opened) #share > a:nth-child(4) { transition-delay: 80ms; } -#share_container:not(.opened) #share > a:nth-child(3) { transition-delay: 100ms; } -#share_container:not(.opened) #share > a:nth-child(2) { transition-delay: 120ms; } -#share_container:not(.opened) #share > a:nth-child(1) { transition-delay: 140ms; } +#share_container:not(.opened) #share > a:nth-child(7) { transition-delay: 15ms; } +#share_container:not(.opened) #share > a:nth-child(6) { transition-delay: 30ms; } +#share_container:not(.opened) #share > a:nth-child(5) { transition-delay: 45ms; } +#share_container:not(.opened) #share > a:nth-child(4) { transition-delay: 60ms; } +#share_container:not(.opened) #share > a:nth-child(3) { transition-delay: 75ms; } +#share_container:not(.opened) #share > a:nth-child(2) { transition-delay: 90ms; } +#share_container:not(.opened) #share > a:nth-child(1) { transition-delay: 105ms; } /* 分享按钮通用样式 */ #share_container .btn { @@ -8369,10 +8363,6 @@ body.noscroll:before { /* 移动端适配 */ @media (max-width: 576px) { - #share_container { - overflow: visible; - } - #share { position: fixed; bottom: 80px; @@ -8385,13 +8375,14 @@ body.noscroll:before { background: var(--color-foreground); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - transform: translateY(30px); + transform: translateY(20px); } #share_container.opened #share { transform: translateY(0); } + /* 移动端分享按钮旋转而不是消失 */ #share_container.opened #share_show { transform: rotate(45deg); opacity: 1; @@ -8400,13 +8391,10 @@ body.noscroll:before { } /* 夜间模式 */ -html.darkmode #share { - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); -} - @media (max-width: 576px) { html.darkmode #share { background: var(--color-foreground); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } }