feat: 优化移动端多邻国连胜显示效果
- 添加火焰图标呼吸发光动画 (duolingoFlameGlow) - 添加徽章淡入动画,与侧边栏打开动画同步 - 移动端徽章添加背景色和圆角样式 - 头像添加点击反馈效果 - 用户名区域改为 flex 布局,优化徽章对齐
This commit is contained in:
76
style.css
76
style.css
@@ -10240,6 +10240,12 @@ html.darkmode.amoled-dark #content:after {
|
|||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
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 {
|
.leftbar-mobile-avatar img {
|
||||||
@@ -10258,6 +10264,11 @@ html.darkmode.amoled-dark #content:after {
|
|||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
letter-spacing: -0.3px;
|
letter-spacing: -0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -11164,6 +11175,22 @@ html.darkmode.amoled-dark #content:after {
|
|||||||
animation: fadeInUp 0.35s var(--ease-emphasized) 0.2s both;
|
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 {
|
html.leftbar-opened .leftbar-mobile-stats {
|
||||||
animation: fadeInUp 0.35s var(--ease-emphasized) 0.25s both;
|
animation: fadeInUp 0.35s var(--ease-emphasized) 0.25s both;
|
||||||
}
|
}
|
||||||
@@ -12895,6 +12922,7 @@ html.darkmode .todo-add-form input:focus {
|
|||||||
color: #FF9600;
|
color: #FF9600;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
animation: duolingoFadeIn 0.5s var(--ease-emphasized-decelerate) both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duolingo-streak.not-done {
|
.duolingo-streak.not-done {
|
||||||
@@ -12904,6 +12932,54 @@ html.darkmode .todo-add-form input:focus {
|
|||||||
.duolingo-flame {
|
.duolingo-flame {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 17px;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user