From a0a05e8177c70fb78ddf9b937f62750b7a553a55 Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Fri, 16 Jan 2026 15:32:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=A8=E7=94=BB=E4=B8=BA=E4=B8=8A=E6=BB=91?=
 =?UTF-8?q?=E4=B8=8B=E6=BB=91=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 点击分享按钮时，按钮上滑退出消失
- 分享渠道从下方滑入替代按钮位置
- 点击空白区域时，分享渠道下滑退出，按钮从上方滑回
- 各分享渠道按钮有错落的滑入滑出延迟
- 使用 cubic-bezier 缓动函数确保动画流畅自然
- tooltip 和二维码弹窗改为上方显示
- 移动端保持弹窗式布局，二维码改为左侧显示
---
 style.css | 287 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 152 insertions(+), 135 deletions(-)

diff --git a/style.css b/style.css
index eb6e743..a335959 100644
--- a/style.css
+++ b/style.css
@@ -8229,6 +8229,8 @@ body.noscroll:before {
 	position: relative;
 	display: inline-flex;
 	align-items: flex-end;
+	overflow: hidden;
+	border-radius: 10px;
 }
 
 #comments_toggle {
@@ -8260,102 +8262,18 @@ body.noscroll:before {
 	font-size: 14px;
 }
 
+/* 分享按钮和面板共用过渡 */
 #share,
 #share_show {
-	width: max-content;
-	width: -moz-max-content;
-	transition: transform var(--animation-normal) var(--ease-emphasized), opacity var(--animation-normal) var(--ease-standard);
-}
-
-#share {
-	position: absolute;
-	bottom: calc(100% + 8px);
-	right: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	padding: 8px;
-	background: var(--color-foreground);
-	border-radius: 12px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
-	transform: translateY(10px);
-	opacity: 0;
-	pointer-events: none;
+	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 > a {
-	opacity: 0;
-	transform: translateY(8px);
-	transition: 
-		opacity var(--animation-normal) var(--ease-emphasized-decelerate),
-		transform var(--animation-normal) var(--ease-spring);
-}
-
-/* 展开时错落动画延迟 - 从下往上依次出现 */
-#share_container.opened #share > a:nth-last-child(1) { transition-delay: 0ms; }
-#share_container.opened #share > a:nth-last-child(2) { transition-delay: 30ms; }
-#share_container.opened #share > a:nth-last-child(3) { transition-delay: 60ms; }
-#share_container.opened #share > a:nth-last-child(4) { transition-delay: 90ms; }
-#share_container.opened #share > a:nth-last-child(5) { transition-delay: 120ms; }
-#share_container.opened #share > a:nth-last-child(6) { transition-delay: 150ms; }
-#share_container.opened #share > a:nth-last-child(7) { transition-delay: 180ms; }
-#share_container.opened #share > a:nth-last-child(8) { transition-delay: 210ms; }
-
-#share_container.opened #share > a {
-	opacity: 1;
-	transform: translateY(0);
-}
-
-/* 收起时错落动画延迟 - 从上往下依次消失 */
-#share_container:not(.opened) #share > a:nth-last-child(8) { transition-delay: 0ms; }
-#share_container:not(.opened) #share > a:nth-last-child(7) { transition-delay: 20ms; }
-#share_container:not(.opened) #share > a:nth-last-child(6) { transition-delay: 40ms; }
-#share_container:not(.opened) #share > a:nth-last-child(5) { transition-delay: 60ms; }
-#share_container:not(.opened) #share > a:nth-last-child(4) { transition-delay: 80ms; }
-#share_container:not(.opened) #share > a:nth-last-child(3) { transition-delay: 100ms; }
-#share_container:not(.opened) #share > a:nth-last-child(2) { transition-delay: 120ms; }
-#share_container:not(.opened) #share > a:nth-last-child(1) { transition-delay: 140ms; }
-
-/* 分享面板移动端响应式适配 */
-@media (max-width: 576px) {
-	#share_container {
-		position: static;
-	}
-	
-	#share {
-		position: fixed;
-		bottom: 80px;
-		right: 16px;
-		left: auto;
-		top: auto;
-		flex-direction: column;
-		gap: 8px;
-		transform: translateY(20px);
-		max-height: calc(100vh - 160px);
-		overflow-y: auto;
-		padding: 10px;
-		background: var(--color-foreground);
-		border-radius: 12px;
-		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-	}
-	
-	#share_container.opened #share {
-		transform: translateY(0);
-	}
-	
-	#share > a {
-		transform: translateY(10px);
-	}
-	
-	#share_container.opened #share > a {
-		transform: translateY(0);
-	}
-}
-
+/* 分享按钮 - 默认显示 */
 #share_show {
-	opacity: 1;
+	position: relative;
+	z-index: 2;
 	height: 38px;
 	width: 38px;
 	display: inline-flex;
@@ -8363,9 +8281,8 @@ body.noscroll:before {
 	justify-content: center;
 	background-color: var(--themecolor) !important;
 	border-color: var(--themecolor) !important;
-	transition: transform var(--animation-normal) var(--ease-spring), 
-		background-color var(--animation-fast) var(--ease-standard),
-		border-color var(--animation-fast) var(--ease-standard);
+	transform: translateY(0);
+	opacity: 1;
 }
 
 #share_show:hover {
@@ -8378,16 +8295,67 @@ body.noscroll:before {
 	border-color: var(--themecolor-dark2) !important;
 }
 
+/* 分享面板 - 默认隐藏在下方 */
+#share {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	display: flex;
+	flex-direction: row;
+	gap: 6px;
+	transform: translateY(100%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* 分享渠道按钮 */
+#share > a {
+	opacity: 0;
+	transform: translateY(20px);
+	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+		opacity 0.25s ease-out;
+}
+
+/* 展开状态 - 分享按钮上滑退出 */
+#share_container.opened #share_show {
+	transform: translateY(-100%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* 展开状态 - 分享面板从下方滑入 */
 #share_container.opened #share {
 	transform: translateY(0);
 	opacity: 1;
-	pointer-events: unset;
+	pointer-events: auto;
 }
 
-#share_container.opened #share_show {
-	transform: rotate(45deg);
+/* 展开时各按钮错落滑入 */
+#share_container.opened #share > a {
+	opacity: 1;
+	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: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 .btn {
 	height: 38px;
 	width: 38px;
@@ -8396,53 +8364,95 @@ body.noscroll:before {
 	align-items: center;
 	justify-content: center;
 	margin: 0;
+	border-radius: 10px;
 }
 
-/* 夜间模式分享面板 */
+/* 移动端适配 */
+@media (max-width: 576px) {
+	#share_container {
+		overflow: visible;
+	}
+	
+	#share {
+		position: fixed;
+		bottom: 80px;
+		right: 16px;
+		left: auto;
+		top: auto;
+		flex-direction: column;
+		gap: 8px;
+		padding: 10px;
+		background: var(--color-foreground);
+		border-radius: 12px;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+		transform: translateY(30px);
+	}
+	
+	#share_container.opened #share {
+		transform: translateY(0);
+	}
+	
+	#share_container.opened #share_show {
+		transform: rotate(45deg);
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
+
+/* 夜间模式 */
 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);
+	}
+}
+
 #share .icon-wechat,
 #share .icon-copy-link {
 	position: relative;
 }
 
+/* 二维码弹窗 - 显示在按钮上方 */
 #share .icon-wechat .wechat-qrcode,
 #share .icon-copy-link .wechat-qrcode {
 	position: absolute;
-	z-index: 2;
-	top: 50%;
-	right: calc(100% + 10px);
-	transform: translateY(-50%) translateX(10px);
+	z-index: 10;
+	bottom: calc(100% + 10px);
+	left: 50%;
+	transform: translateX(-50%) translateY(10px);
 	width: max-content;
 	width: -moz-max-content;
 	background: var(--color-widgets);
-	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 	text-align: center;
-	padding: 15px 30px;
-	transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+	padding: 15px 20px;
+	transition: opacity 0.25s ease, transform 0.25s ease;
 	opacity: 0;
-	border-radius: 8px;
+	border-radius: 12px;
 	pointer-events: none;
 }
 
 #share .icon-wechat:hover .wechat-qrcode,
 #share .icon-copy-link:hover .wechat-qrcode {
-	transform: translateY(-50%) translateX(0);
+	transform: translateX(-50%) translateY(0);
 	opacity: 1;
+	pointer-events: auto;
 }
 
+/* 二维码弹窗箭头 */
 #share .wechat-qrcode:before {
 	position: absolute;
 	z-index: 3;
-	top: 50%;
-	right: -6px;
+	bottom: -6px;
+	left: 50%;
 	display: block;
 	width: 12px;
 	height: 12px;
 	content: "";
-	transform: translateY(-50%) rotate(45deg);
+	transform: translateX(-50%) rotate(45deg);
 	border-radius: 2px;
 	background: var(--color-widgets);
 }
@@ -8452,14 +8462,16 @@ html.darkmode #share {
 }
 
 #share .wechat-qrcode h4 {
-	font-size: 18px;
+	font-size: 16px;
 	padding-bottom: 10px;
+	margin: 0;
 }
 
 #share .wechat-qrcode .help {
-	color: #000;
-	padding-top: 20px;
-	padding-bottom: 5px;
+	color: #666;
+	padding-top: 10px;
+	padding-bottom: 0;
+	font-size: 12px;
 }
 
 html.darkmode #share .wechat-qrcode .help {
@@ -8470,39 +8482,37 @@ html.darkmode #share .wechat-qrcode .help {
 	position: relative;
 }
 
-/* 分享按钮 tooltip */
+/* tooltip - 显示在按钮上方 */
 #share > a:before,
 #share_show:before {
 	pointer-events: none;
 	position: absolute;
-	top: 50%;
-	right: calc(100% + 8px);
-	transform: translateY(-50%) translateX(5px);
-	line-height: 25px;
+	bottom: calc(100% + 8px);
+	left: 50%;
+	transform: translateX(-50%) translateY(5px);
+	line-height: 1.4;
 	width: max-content;
 	width: -moz-max-content;
 	text-align: center;
 	font-weight: normal;
 	color: #fff;
-	background: #32325d;
-	padding: 3px 10px;
-	font-size: 14px;
+	background: rgba(50, 50, 93, 0.95);
+	padding: 6px 12px;
+	font-size: 13px;
 	border-radius: 6px;
-	z-index: 3;
-	transition: all 0.2s var(--ease-standard);
+	z-index: 10;
+	transition: opacity 0.2s ease, transform 0.2s ease;
 	opacity: 0;
 }
 
 #share > a:hover:before,
 #share_show:hover:before {
-	transform: translateY(-50%) translateX(0);
-	opacity: 0.9;
+	transform: translateX(-50%) translateY(0);
+	opacity: 1;
 }
 
 #share_show:before {
 	content: attr(tooltip);
-	top: 50%;
-	right: calc(100% + 8px);
 	height: max-content;
 	height: -moz-max-content;
 	text-transform: none;
@@ -8540,17 +8550,22 @@ html.darkmode #share .wechat-qrcode .help {
 	display: none !important;
 }
 
-/* 移动端分享按钮 tooltip 隐藏 */
+/* 移动端分享按钮适配 */
 @media (max-width: 576px) {
-	#share > a:before {
+	/* 隐藏 tooltip */
+	#share > a:before,
+	#share_show:before {
 		display: none !important;
 	}
 	
+	/* 二维码弹窗改为左侧显示 */
 	#share .icon-wechat .wechat-qrcode,
 	#share .icon-copy-link .wechat-qrcode {
-		right: auto;
-		left: calc(100% + 10px);
-		transform: translateY(-50%) translateX(-10px);
+		bottom: auto;
+		top: 50%;
+		left: auto;
+		right: calc(100% + 10px);
+		transform: translateY(-50%) translateX(10px);
 	}
 	
 	#share .icon-wechat:hover .wechat-qrcode,
@@ -8559,8 +8574,11 @@ html.darkmode #share .wechat-qrcode .help {
 	}
 	
 	#share .wechat-qrcode:before {
-		right: auto;
-		left: -6px;
+		bottom: auto;
+		top: 50%;
+		left: auto;
+		right: -6px;
+		transform: translateY(-50%) rotate(45deg);
 	}
 }
 
@@ -8587,7 +8605,6 @@ html.darkmode #share .wechat-qrcode .help {
 
 #wpadminbar:hover {
 	transform: none !important;
-
 }
 
 #wpadminbar:after {