feat: timer 完成全屏彩带动画 (10 条彩色碎片飘落)
This commit is contained in:
@@ -1,5 +1,19 @@
|
||||
<view class="container timer-page page-enter" style="{{themeStyle}}">
|
||||
|
||||
<!-- 全屏彩带完成庆祝 -->
|
||||
<view class="confetti" wx:if="{{isCompleted}}">
|
||||
<view class="confetti-piece c1"></view>
|
||||
<view class="confetti-piece c2"></view>
|
||||
<view class="confetti-piece c3"></view>
|
||||
<view class="confetti-piece c4"></view>
|
||||
<view class="confetti-piece c5"></view>
|
||||
<view class="confetti-piece c6"></view>
|
||||
<view class="confetti-piece c7"></view>
|
||||
<view class="confetti-piece c8"></view>
|
||||
<view class="confetti-piece c9"></view>
|
||||
<view class="confetti-piece c10"></view>
|
||||
</view>
|
||||
|
||||
<!-- 呼吸引导环 + 进度条 -->
|
||||
<view class="ring-wrapper">
|
||||
<view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
|
||||
|
||||
@@ -139,3 +139,40 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ---- full-screen confetti ---- */
|
||||
.confetti {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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); }
|
||||
|
||||
@keyframes confettiFall {
|
||||
0% { opacity: 1; transform: translateY(0) rotate(0deg); }
|
||||
100% { opacity: 0.6; transform: translateY(100vh) rotate(720deg); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user