diff --git a/2.html b/2.html new file mode 100644 index 0000000..d60c878 --- /dev/null +++ b/2.html @@ -0,0 +1,95 @@ + + + + + + + + CSS实现卡片边框渐变动画 + + + + + +
+ 苏苏就是小苏苏888 +
+ + + \ No newline at end of file diff --git a/guess.html b/guess.html index 2f41aa8..d991fa0 100644 --- a/guess.html +++ b/guess.html @@ -1,105 +1,132 @@ - - - - 朴见潮音 - 猜歌 - - - + + + - - - -
-
- -
- - -
- - - - - - - - - - - - - - -
+ 朴见潮音 - 猜歌 + + + -
- - - - - - -
- + + + + +
+ +
+ +
+ + +
+ + + + + + + + + + + + + + +
+ +
+ + + + + + +
+ +
连对3题有奖品哦，快来挑战吧！
-
- -
-
- - - -
-
-
请问哪首歌是真人唱的？
-
- - - -
-
- -
恭喜答对！马上进入下一题…
-
+
+ +
+
+
+ + + +
-
- -
- -
恭喜答对！马上进入下一题…
+
请问哪首歌是真人唱的？
+
+ -
- - 返回首页 +
+
+ +
恭喜答对！马上进入下一题…
+ +
+ + + +
+ +
恭喜答对！马上进入下一题…
+
+ +
+ + 返回首页 +
+
+ +
+
+
+ +
+
很遗憾没有答对…
+
+ + +
+ + 返回首页 +
+
+
- - - +
+ + + + \ No newline at end of file diff --git a/static/css/guess.css b/static/css/guess.css index 8825b4d..b8a6748 100644 --- a/static/css/guess.css +++ b/static/css/guess.css @@ -3,6 +3,9 @@ padding: 0; box-sizing: border-box; } +:root { + --base-height: 500px; +} .container { width: 100%; background-color: #333333; @@ -215,7 +218,9 @@ left: 997px; } .container .container-box .details { - height: 500px; + flex: 1; + max-height: 500px; + margin-bottom: 40px; width: 1200px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.1); @@ -267,7 +272,7 @@ width: 400px; height: 86px; position: absolute; - top: 293px; + bottom: 120px; right: 0; } .container .container-box .details .start-box { @@ -276,35 +281,33 @@ position: absolute; top: 0; left: 0; + display: flex; } .container .container-box .details .start-box .microphone { - width: 326px; - height: 326px; - position: absolute; - top: 93px; - left: 163px; + width: calc(var(--base-height) * 0.652); + height: calc(var(--base-height) * 0.652); + margin-top: calc(var(--base-height) * 0.186); + margin-left: 163px; + margin-right: 28px; } -.container .container-box .details .start-box .suspect-text { - width: 493px; - height: 56px; - position: absolute; - top: 136px; - left: 517px; +.container .container-box .details .start-box .start-right { + display: flex; + flex-direction: column; } -.container .container-box .details .start-box .hint { +.container .container-box .details .start-box .start-right .suspect-text { + height: calc(var(--base-height) * 0.112); + margin-top: calc(var(--base-height) * 0.278); + margin-bottom: calc(var(--base-height) * 0.048); +} +.container .container-box .details .start-box .start-right .hint { font-size: 18px; color: #ffffff; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - position: absolute; - top: 215px; - left: 517px; + margin-bottom: calc(var(--base-height) * 0.058); } -.container .container-box .details .start-box .start-icon { - width: 168px; - height: 69px; - position: absolute; - top: 268px; - left: 517px; +.container .container-box .details .start-box .start-right .start-icon { + width: fit-content; + height: calc(var(--base-height) * 0.138); cursor: pointer; } .container .container-box .details .answer-box { @@ -314,7 +317,7 @@ top: 0; left: 0; flex-direction: column; - padding-top: 39px; + padding-top: calc(var(--base-height) * 0.078); align-items: center; } @keyframes fadeInUp { @@ -326,9 +329,9 @@ } } .container .container-box .details .answer-box .figure { - width: 60px; - height: 60px; - margin-bottom: 25px; + width: calc(var(--base-height) * 0.12); + height: calc(var(--base-height) * 0.12); + margin-bottom: calc(var(--base-height) * 0.05); } .container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) { margin-right: 175px; @@ -340,30 +343,72 @@ margin-right: 78px; } .container .container-box .details .answer-box .list { - margin-bottom: 13px; + margin-bottom: calc(var(--base-height) * 0.026); } .container .container-box .details .answer-box .list .item { position: relative; flex-direction: column; align-items: center; } -.container .container-box .details .answer-box .list .item .img { - width: 200px; - height: 212px; - margin-bottom: 40px; +.container .container-box .details .answer-box .list .item .img-box { + display: flex; + justify-content: center; + align-items: center; + width: calc(var(--base-height) * 0.412); + height: calc(var(--base-height) * 0.436); + margin-bottom: calc(var(--base-height) * 0.074); + position: relative; + z-index: 1; + border-radius: 20px; } -.container .container-box .details .answer-box .list .item .icon { +.container .container-box .details .answer-box .list .item .img-box.show { + background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846); + animation: bg 2.5s infinite linear; +} +@property --rotate { + syntax: ""; + initial-value: 0deg; + inherits: false; +} +@keyframes bg { + 0% { + --rotate: 0deg; + } + 100% { + --rotate: 360deg; + } +} +.container .container-box .details .answer-box .list .item .img-box::after { + content: ""; + z-index: -1; + width: calc(100% - 6px); + height: calc(100% - 6px); position: absolute; - top: 164px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 20px; + background-color: #7d4bf8; +} +.container .container-box .details .answer-box .list .item .img-box .img { + width: calc(100% - 6px); + height: calc(100% - 6px); + position: relative; + z-index: 1; +} +.container .container-box .details .answer-box .list .item .img-box .icon { + position: absolute; + bottom: calc(var(--base-height) * 0.036); left: 50%; transform: translateX(-50%); - width: 30px; - height: 30px; + width: calc(var(--base-height) * 0.06); + height: calc(var(--base-height) * 0.06); cursor: pointer; + z-index: 1; } .container .container-box .details .answer-box .list .item .select-me { - width: 150px; - height: 64px; + width: calc(var(--base-height) * 0.3); + height: calc(var(--base-height) * 0.128); cursor: pointer; } .container .container-box .details .answer-box .text { @@ -382,13 +427,14 @@ background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898)); flex-direction: column; align-items: center; + z-index: 2; } .container .container-box .details .masking .hint-box { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.25); position: relative; z-index: 1; padding: 3px; - height: 64px; + height: calc(var(--base-height) * 0.128); padding-left: 18px; border-radius: 60px; padding-right: 27px; @@ -412,11 +458,22 @@ } .container .container-box .details .masking .hint-box .like .icon { position: absolute; - left: -3px; - top: -3px; + left: -10px; + top: -17px; width: 92px; height: 98px; } +.container .container-box .details .masking .hint-box .regret { + position: relative; + width: calc(var(--base-height) * 0.23); + height: calc(var(--base-height) * 0.23); +} +.container .container-box .details .masking .hint-box .regret .icon { + width: 100%; + height: 100%; + position: absolute; + top: -15px; +} .container .container-box .details .masking .hint-box .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; @@ -425,17 +482,7 @@ color: #ffffff; text-overflow: ellipsis; } -.container .container-box .details .reply { - justify-content: center; -} -.container .container-box .details .win { - justify-content: space-between; -} -.container .container-box .details .win .win-icon { - width: 209px; - height: 200px; -} -.container .container-box .details .win .index-btn { +.container .container-box .details .masking .index-btn { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -447,8 +494,9 @@ line-height: 40px; z-index: 1; position: relative; + cursor: pointer; } -.container .container-box .details .win .index-btn .index-icon { +.container .container-box .details .masking .index-btn .index-icon { width: 190px; height: 40px; position: absolute; @@ -457,6 +505,39 @@ transform: translate(-50%, -50%); z-index: -1; } +.container .container-box .details .reply { + justify-content: center; +} +.container .container-box .details .win .gold-left { + width: 327px; + height: 381px; + position: absolute; + top: 55px; + left: 146px; +} +.container .container-box .details .win .gold-right { + width: 416px; + height: 375px; + position: absolute; + top: 37px; + left: 755px; +} +.container .container-box .details .win .win-icon { + width: calc(var(--base-height) * 0.418); + height: calc(var(--base-height) * 0.4); + margin-top: calc(var(--base-height) * 0.004); + margin-bottom: calc(var(--base-height) * 0.022); +} +.container .container-box .details .win .hint-box { + margin-bottom: calc(var(--base-height) * 0.318); +} +.container .container-box .details .lose { + padding-top: calc(var(--base-height) * 0.422); +} +.container .container-box .details .lose .hint-box { + margin-bottom: calc(var(--base-height) * 0.322); + padding-left: 15px; +} /* 入场动画 */ .slide-right-enter-from { /* 入场开始位置：向左偏移自身宽度 */ diff --git a/static/css/guess.less b/static/css/guess.less index e443d75..ee93108 100644 --- a/static/css/guess.less +++ b/static/css/guess.less @@ -3,26 +3,36 @@ padding: 0; box-sizing: border-box; } + +:root { + --base-height: 500px; +} + .container { .flexflex { display: flex; } + .flexcenter { display: flex; justify-content: center; align-items: center; } + .flexjcenter { display: flex; justify-content: center; } + .flexacenter { display: flex; align-items: center; } + .flex1 { flex: 1; } + .flexcolumn { display: flex; flex-direction: column; @@ -239,7 +249,10 @@ } .details { - height: 500px; + // height: 500px; + flex: 1; + max-height: 500px; + margin-bottom: 40px; width: 1200px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.1); @@ -297,7 +310,8 @@ width: 400px; height: 86px; position: absolute; - top: 293px; + // top: 293px; + bottom: 120px; right: 0; } @@ -307,39 +321,50 @@ position: absolute; top: 0; left: 0; + display: flex; + + .microphone { - width: 326px; - height: 326px; - position: absolute; - top: 93px; - left: 163px; + // width: 326px; + // height: 326px; + // margin-top: 93px; + width: calc(var(--base-height) * 0.652); + height: calc(var(--base-height) * 0.652); + margin-top: calc(var(--base-height) * 0.186); + margin-left: 163px; + margin-right: 28px; } - .suspect-text { - width: 493px; - height: 56px; - position: absolute; - top: 136px; - left: 517px; + .start-right { + display: flex; + flex-direction: column; + + .suspect-text { + // height: 56px; + // margin-top: 136px; + // margin-bottom: 23px; + height: calc(var(--base-height) * 0.112); + margin-top: calc(var(--base-height) * 0.278); + margin-bottom: calc(var(--base-height) * 0.048); + } + + .hint { + font-size: 18px; + color: #ffffff; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + // position: absolute; + // top: calc(var(--base-height) * 0.43); + // left: 517px; + margin-bottom: calc(var(--base-height) * 0.058); + } + + .start-icon { + width: fit-content; + height: calc(var(--base-height) * 0.138); + cursor: pointer; + } } - .hint { - font-size: 18px; - color: #ffffff; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - position: absolute; - top: 215px; - left: 517px; - } - - .start-icon { - width: 168px; - height: 69px; - position: absolute; - top: 268px; - left: 517px; - cursor: pointer; - } } .answer-box { @@ -349,7 +374,8 @@ top: 0; left: 0; flex-direction: column; - padding-top: 39px; + // padding-top: 39px; + padding-top: calc(var(--base-height) * 0.078); align-items: center; // animation: fadeInUp 3s ease forwards; @@ -364,9 +390,10 @@ } .figure { - width: 60px; - height: 60px; - margin-bottom: 25px; + width: calc(var(--base-height) * 0.12); + height: calc(var(--base-height) * 0.12); + // margin-bottom: 22px; + margin-bottom: calc(var(--base-height) * 0.05); } &.answer-0 { @@ -394,30 +421,93 @@ } .list { - margin-bottom: 13px; + // margin-bottom: 13px; + margin-bottom: calc(var(--base-height) * 0.026); + .item { position: relative; flex-direction: column; align-items: center; - .img { - width: 200px; - height: 212px; - margin-bottom: 40px; + + .img-box { + display: flex; + justify-content: center; + align-items: center; + width: calc(var(--base-height) * 0.412); + height: calc(var(--base-height) * 0.436); + // width: 206px; + // height: 218px; + // margin-bottom: 37px; + margin-bottom: calc(var(--base-height) * 0.074); + + position: relative; + z-index: 1; + border-radius: 20px; + + + &.show { + background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846); + animation: bg 2.5s infinite linear; + } + + @property --rotate { + syntax: ""; + initial-value: 0deg; + inherits: false; + } + + @keyframes bg { + 0% { + --rotate: 0deg; + } + + 100% { + --rotate: 360deg; + } + } + + + &::after { + content: ""; + z-index: -1; + width: calc(100% - 6px); + height: calc(100% - 6px); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 20px; + background-color: #7d4bf8; + } + + .img { + width: calc(100% - 6px); + height: calc(100% - 6px); + position: relative; + z-index: 1; + } + + .icon { + position: absolute; + // top: 164px; + bottom: calc(var(--base-height) * 0.036); + left: 50%; + transform: translateX(-50%); + width: calc(var(--base-height) * 0.06); + height: calc(var(--base-height) * 0.06); + cursor: pointer; + z-index: 1; + } } - .icon { - position: absolute; - top: 164px; - left: 50%; - transform: translateX(-50%); - width: 30px; - height: 30px; - cursor: pointer; - } + + .select-me { - width: 150px; - height: 64px; + // width: 150px; + // height: 64px; + width: calc(var(--base-height) * 0.3); + height: calc(var(--base-height) * 0.128); cursor: pointer; } } @@ -441,15 +531,19 @@ background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898)); flex-direction: column; align-items: center; + z-index: 2; + .hint-box { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.25); position: relative; z-index: 1; padding: 3px; - height: 64px; + // height: 64px; + height: calc(var(--base-height) * 0.128); padding-left: 18px; border-radius: 60px; padding-right: 27px; + &::after { content: ""; position: absolute; @@ -470,13 +564,28 @@ .icon { position: absolute; - left: -3px; - top: -3px; + left: -10px; + top: -17px; width: 92px; height: 98px; } } + .regret { + position: relative; + // width: 115px; + // height: 115px; + width: calc(var(--base-height) * 0.23); + height: calc(var(--base-height) * 0.23); + + .icon { + width: 100%; + height: 100%; + position: absolute; + top: -15px; + } + } + .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; @@ -486,18 +595,6 @@ text-overflow: ellipsis; } } - } - - .reply { - justify-content: center; - } - - .win { - justify-content: space-between; - .win-icon { - width: 209px; - height: 200px; - } .index-btn { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; @@ -511,6 +608,7 @@ line-height: 40px; z-index: 1; position: relative; + cursor: pointer; .index-icon { width: 190px; @@ -523,6 +621,55 @@ } } } + + .reply { + justify-content: center; + } + + .win { + .gold-left { + width: 327px; + height: 381px; + position: absolute; + top: 55px; + left: 146px; + } + + .gold-right { + width: 416px; + height: 375px; + position: absolute; + top: 37px; + left: 755px; + } + + .win-icon { + // width: 209px; + // height: 200px; + // margin-top: 2px; + // margin-bottom: 11px; + width: calc(var(--base-height) * 0.418); + height: calc(var(--base-height) * 0.4); + margin-top: calc(var(--base-height) * 0.004); + margin-bottom: calc(var(--base-height) * 0.022); + } + + .hint-box { + // margin-bottom: 159px; + margin-bottom: calc(var(--base-height) * 0.318); + } + } + + .lose { + // padding-top: 211px; + padding-top: calc(var(--base-height) * 0.422); + + .hint-box { + // margin-bottom: 161px; + margin-bottom: calc(var(--base-height) * 0.322); + padding-left: 15px; + } + } } } } @@ -566,4 +713,4 @@ /* 列表排序动画（可选） */ .slide-move { transition: transform 0.3s ease; -} +} \ No newline at end of file diff --git a/static/img/guess/gold-left.png b/static/img/guess/gold-left.png new file mode 100644 index 0000000..39abd9e Binary files /dev/null and b/static/img/guess/gold-left.png differ diff --git a/static/img/guess/gold-right.png b/static/img/guess/gold-right.png new file mode 100644 index 0000000..21f7c7a Binary files /dev/null and b/static/img/guess/gold-right.png differ diff --git a/static/js/guess.js b/static/js/guess.js index 0db44c7..2eb1778 100644 --- a/static/js/guess.js +++ b/static/js/guess.js @@ -2,20 +2,36 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue; const search = createApp({ setup() { const musicData = ref([ - ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"], + ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》.MP3"], ["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"], ["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"], ]); - let step = ref(0); // null 是未开始 0 是第一题 + let step = ref(null); // null 是未开始 0 是第一题 + let detailsHeight = ref(500) + const detailsRef = ref(null) + + let isAnswer = ref(false) onMounted(() => { console.log("init"); init(); + + console.log("detailsRef", detailsRef.value); + + const searchParams = new URLSearchParams(window.location.search); + isAnswer.value = searchParams.has('answer') ? true : false; + + nextTick(() => { + if (detailsRef.value) { + detailsHeight.value = detailsRef.value.clientHeight + console.log(detailsHeight.value); + } + }) + }); const init = () => { - // 将 musicData 里的 二维值打乱 musicData.value.forEach((item) => { item.sort(() => Math.random() - 0.5); }); @@ -29,18 +45,76 @@ const search = createApp({ // 添加一个方法来切换到下一题 const nextStep = () => { - if (step.value < musicData.value.length - 1) { - step.value++; - } else { - // 所有问题都回答完毕，可以重置或显示结果 - // step.value = null; - } + step.value++; }; + const audioPlayer = ref(null) + const audiozSrc = ref("") + const play = (item) => { console.log("item", item); + audioPlayer.value.src = './static/mp3/guess/' + item + audioPlayer.value.play() + + audiozSrc.value = item }; - return { play, step, begin, musicData, nextStep }; + const stop = () => { + audioPlayer.value.pause() + audiozSrc.value = "" + } + + const playSucceed = () => { + audioPlayer.value.src = './static/mp3/guess/succeed.mp3' + audioPlayer.value.play() + } + const playLose = () => { + audioPlayer.value.src = './static/mp3/guess/lose.mp3' + audioPlayer.value.play() + } + + const audioEnd = () => { + console.log("结束"); + + audiozSrc.value = "" + } + + const select = (item, index) => { + stop() + if (item.indexOf("《") !== -1) { + playSucceed() + if (step.value == musicData.value.length - 1) { + winState.value = true + } else { + replyState.value = true + autoSkip() + } + } else { + loseState.value = true + playLose() + } + } + + let replyState = ref(false) + let winState = ref(false) + let loseState = ref(false) + + const autoSkip = () => { + setTimeout(() => { + replyState.value = false + nextStep() + }, 2000) + } + + const backHome = () => { + step.value = null + replyState.value = false + winState.value = false + loseState.value = false + } + + + + return { isAnswer, detailsHeight, detailsRef, audioEnd, playSucceed, stop, audiozSrc, audioPlayer, backHome, select, loseState, winState, replyState, play, step, begin, musicData, nextStep }; }, }).mount("#guess"); diff --git a/static/mp3/guess/lose.mp3 b/static/mp3/guess/lose.mp3 new file mode 100644 index 0000000..dcfee83 Binary files /dev/null and b/static/mp3/guess/lose.mp3 differ diff --git a/static/mp3/guess/succeed.mp3 b/static/mp3/guess/succeed.mp3 new file mode 100644 index 0000000..de51d68 Binary files /dev/null and b/static/mp3/guess/succeed.mp3 differ