feat: 完成训练分级庆祝 (normal/first/milestone/record)
- normal: 12 条彩带 - record (破个人纪录): 24 条 + 横幅"🏆 新纪录!X秒" - milestone (连击 7/14/30/50/100/365 天): 32 条 + 横幅 - first (首次训练): 40 条 + 横幅"🎉 第一次训练" 横幅 3.5s 后自动淡出,彩带时长随等级递增(2.4s → 4s)。
This commit is contained in:
+44
-12
@@ -155,24 +155,56 @@
|
||||
.confetti-piece {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
width: 16rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: confettiFall 2.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.c1 { left: 10%; background: #FF6B35; animation-delay: 0.00s; transform: rotate(15deg); }
|
||||
.c2 { left: 22%; background: #FFD93D; animation-delay: 0.10s; transform: rotate(-20deg); }
|
||||
.c3 { left: 34%; background: #4CAF50; animation-delay: 0.20s; transform: rotate(30deg); }
|
||||
.c4 { left: 46%; background: #2979FF; animation-delay: 0.05s; transform: rotate(-10deg); }
|
||||
.c5 { left: 58%; background: #EC407A; animation-delay: 0.15s; transform: rotate(45deg); }
|
||||
.c6 { left: 70%; background: #7E57C2; animation-delay: 0.25s; transform: rotate(-30deg); }
|
||||
.c7 { left: 82%; background: #FF8C5A; animation-delay: 0.08s; transform: rotate(20deg); }
|
||||
.c8 { left: 14%; background: #5C9CFF; animation-delay: 0.18s; transform: rotate(-40deg); }
|
||||
.c9 { left: 38%; background: #6EC072; animation-delay: 0.28s; transform: rotate(50deg); }
|
||||
.c10 { left: 90%; background: #FFD93D; animation-delay: 0.12s; transform: rotate(-25deg); }
|
||||
/* Higher celebration levels: faster / longer fall */
|
||||
.confetti-piece--milestone,
|
||||
.confetti-piece--first,
|
||||
.confetti-piece--record {
|
||||
animation-duration: 3.2s;
|
||||
}
|
||||
|
||||
.confetti-piece--first {
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes confettiFall {
|
||||
0% { opacity: 1; transform: translateY(0) rotate(0deg); }
|
||||
100% { opacity: 0.6; transform: translateY(100vh) rotate(720deg); }
|
||||
}
|
||||
|
||||
/* ---- achievement banner ---- */
|
||||
.achievement-banner {
|
||||
position: fixed;
|
||||
top: 160rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
padding: 24rpx 48rpx;
|
||||
border-radius: 48rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.4);
|
||||
z-index: 10000;
|
||||
animation: achievementIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
|
||||
achievementOut 0.4s ease-in 3.5s both;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.achievement-text {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@keyframes achievementIn {
|
||||
0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
|
||||
100% { opacity: 1; transform: translateX(-50%) scale(1); }
|
||||
}
|
||||
|
||||
@keyframes achievementOut {
|
||||
0% { opacity: 1; transform: translateX(-50%) scale(1); }
|
||||
100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user