diff --git a/components/QianmenScene.vue b/components/QianmenScene.vue index 8d6a948..1dbcae2 100644 --- a/components/QianmenScene.vue +++ b/components/QianmenScene.vue @@ -1,5 +1,5 @@ @@ -397,6 +447,123 @@ const calculateHeight = () => { 50% { opacity: 1; transform: scale(1.5); } } +/* 音乐控制按钮 */ +.music-control { + position: absolute; + top: 810rpx; + left: 500rpx; + width: 82rpx; + height: 82rpx; + cursor: pointer; + z-index: 30; + transition: all 0.3s ease; +} + +.music-control:active { + transform: scale(0.95); +} + +.music-icon { + width: 100%; + height: 100%; + transition: all 0.3s ease; + opacity: 1; + animation: scale 1.5s infinite ease-in-out; +} + +@keyframes scale { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} + +/* 福字点击区域 */ +.fu-click-area { + position: absolute; + width: 100rpx; + height: 100rpx; + cursor: pointer; + z-index: 25; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + pointer-events: auto; +} + +.fu-icon { + width: 94rpx; + height: 74rpx; + margin-bottom: 20rpx; + animation: sway 3s infinite ease-in-out; + transform-origin: center center; +} + +@keyframes sway { + 0%, 100% { + transform: rotate(0deg); + } + 25% { + transform: rotate(-3deg); + } + 75% { + transform: rotate(3deg); + } +} + +.hand-icon { + position: absolute; + width: 38rpx; + height: 40rpx; + top: 70%; + transform: translate(-50%, -50%); + animation: clickUp 2s infinite ease-in-out; + pointer-events: none; +} + +@keyframes clickUp { + 0%, 100% { + transform: translateY(0) scale(1.2); + } + 50% { + transform: translateY(-10rpx) scale(1); + } +} + +.fu-click-area .click-indicator { + position: absolute; + top: 40rpx; + left: 50%; + transform: translateX(-50%); + width: 60rpx; + height: 60rpx; +} + +.fu-click-area .pulse-circle { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: rgba(255, 215, 0, 0.3); + border: 2rpx solid rgba(255, 215, 0, 0.6); + animation: pulse 2s infinite; + animation-delay: 1s; /* hand-icon播放到50%(1秒)后再开始 */ +} + +/* sq1图片 */ +.sq1-image { + position: absolute; + top: 220rpx; + right: -5rpx; + width: auto; + height: auto; + max-width: 300rpx; + z-index: 20; + animation: fadeIn 0.5s ease; +} + /* 福印收集标记 */ .seal-collected-mark { position: absolute; diff --git a/static/music/bgm1.mp3 b/static/music/bgm1.mp3 new file mode 100644 index 0000000..13e5391 Binary files /dev/null and b/static/music/bgm1.mp3 differ