From 3e68218ac1a7dc8cfda11ae2fe0e53f1b244806b Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Mon, 12 Jan 2026 00:00:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E5=A4=9A=E9=82=BB=E5=9B=BD=E8=BF=9E=E8=83=9C=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加火焰图标呼吸发光动画 (duolingoFlameGlow)
- 添加徽章淡入动画，与侧边栏打开动画同步
- 移动端徽章添加背景色和圆角样式
- 头像添加点击反馈效果
- 用户名区域改为 flex 布局，优化徽章对齐
---
 style.css | 76 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/style.css b/style.css
index ce918e1..3bfe4de 100644
--- a/style.css
+++ b/style.css
@@ -10240,6 +10240,12 @@ html.darkmode.amoled-dark #content:after {
 		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 		position: relative;
 		z-index: 1;
+		transition: all var(--animation-normal) var(--ease-spring);
+	}
+	
+	.leftbar-mobile-avatar:active {
+		transform: scale(0.95);
+		border-color: rgba(255, 255, 255, 0.6);
 	}
 	
 	.leftbar-mobile-avatar img {
@@ -10258,6 +10264,11 @@ html.darkmode.amoled-dark #content:after {
 		font-size: 22px;
 		font-weight: 700;
 		margin-bottom: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 4px;
 		letter-spacing: -0.3px;
 	}
 	
@@ -11164,6 +11175,22 @@ html.darkmode.amoled-dark #content:after {
 		animation: fadeInUp 0.35s var(--ease-emphasized) 0.2s both;
 	}
 	
+	/* 多邻国连胜徽章入场动画 */
+	html.leftbar-opened .leftbar-mobile-user-name .duolingo-streak {
+		animation: duolingoBadgeIn 0.4s var(--ease-spring) 0.35s both;
+	}
+	
+	@keyframes duolingoBadgeIn {
+		from {
+			opacity: 0;
+			transform: scale(0.5) translateX(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1) translateX(0);
+		}
+	}
+	
 	html.leftbar-opened .leftbar-mobile-stats {
 		animation: fadeInUp 0.35s var(--ease-emphasized) 0.25s both;
 	}
@@ -12895,6 +12922,7 @@ html.darkmode .todo-add-form input:focus {
 	color: #FF9600;
 	margin-left: 6px;
 	vertical-align: middle;
+	animation: duolingoFadeIn 0.5s var(--ease-emphasized-decelerate) both;
 }
 
 .duolingo-streak.not-done {
@@ -12904,6 +12932,54 @@ html.darkmode .todo-add-form input:focus {
 .duolingo-flame {
 	width: 14px;
 	height: 17px;
+	animation: duolingoFlameGlow 2s ease-in-out infinite;
+}
+
+.duolingo-streak.not-done .duolingo-flame {
+	animation: none;
+	opacity: 0.6;
+}
+
+/* 多邻国火焰动画 */
+@keyframes duolingoFlameGlow {
+	0%, 100% {
+		filter: drop-shadow(0 0 2px rgba(255, 150, 0, 0.4));
+		transform: scale(1);
+	}
+	50% {
+		filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8));
+		transform: scale(1.05);
+	}
+}
+
+@keyframes duolingoFadeIn {
+	from {
+		opacity: 0;
+		transform: translateX(-5px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+/* 移动端多邻国连胜样式优化 */
+.leftbar-mobile-user-name .duolingo-streak {
+	font-size: 16px;
+	margin-left: 8px;
+	padding: 2px 8px;
+	background: rgba(255, 150, 0, 0.15);
+	border-radius: 12px;
+	gap: 4px;
+}
+
+.leftbar-mobile-user-name .duolingo-streak.not-done {
+	background: rgba(150, 150, 150, 0.15);
+}
+
+.leftbar-mobile-user-name .duolingo-flame {
+	width: 16px;
+	height: 19px;
 }