diff --git a/begin.html b/begin.html index b41abea..e07806f 100644 --- a/begin.html +++ b/begin.html @@ -119,7 +119,7 @@

  • 活动时间：

    - 2021年X月X日 10：00 — 2021年X月X日 23：59 + 2021年7月1日 — 2021年7月15日
  • diff --git a/css/game1.css b/css/game1.css index 80c7c41..7eef103 100644 --- a/css/game1.css +++ b/css/game1.css @@ -5,6 +5,16 @@ .game1Index p.bgm img{ width: 100%; height: 100%; + +} +.game1Index p.bgm img:nth-child(1){ + opacity: 1; +} +.game1Index p.bgm img:nth-child(2){ + opacity: 0; + position: absolute; + left: 0; + top: 0; } .game1Index .imgList li{ width: 1.21rem; @@ -75,6 +85,7 @@ top: 0; background: url(../img/game1/successBgm.png) no-repeat; background-size: 100% 100%; + z-index: 99; } .game1Index .maskBgm:after { content: ""; @@ -106,17 +117,30 @@ width: 100%; height: 1.66rem; z-index:-1 ; + +} +.game1Index div.line div{ + margin: 0 auto; + width: 11rem; + height: 100%; display: flex; justify-content: space-between; align-items: center; } .game1Index div.line p{ box-sizing: border-box; - padding: 0 1.15rem; font-size: .44rem; font-weight: 400; color: #C9C6BA; - opacity: 0.41; +} +div.line p{ + width: .42rem; + height: .4rem; + font-size: 0; +} +div.line p img{ + width: 100%; + height: 100%; } .game1Index div.closeIcon{ display: flex; diff --git a/css/game2.css b/css/game2.css index 139b1a9..174d612 100644 --- a/css/game2.css +++ b/css/game2.css @@ -82,6 +82,7 @@ top: 0; background: url(../img/game2/successBgm.png) no-repeat; background-size: 100% 100%; + z-index: 99; } .game2Index .maskBgm:after { content: ""; @@ -117,13 +118,19 @@ justify-content: space-between; align-items: center; } +.game2Index div.line div{ + margin: 0 auto; + width: 11rem; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} .game2Index div.line p{ box-sizing: border-box; - padding: 0 1.15rem; font-size: .44rem; font-weight: 400; color: #C9C6BA; - opacity: 0.41; } .game2Index div.closeIcon{ display: flex; diff --git a/css/game3.css b/css/game3.css index 700f022..0159210 100644 --- a/css/game3.css +++ b/css/game3.css @@ -70,6 +70,7 @@ top: 0; background: url(../img/game3/successBgm.png) no-repeat; background-size: 100% 100%; + z-index: 99; } .game3Index .maskBgm:after { content: ""; @@ -105,13 +106,19 @@ justify-content: space-between; align-items: center; } +.game3Index div.line div{ + margin: 0 auto; + width: 11rem; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} .game3Index div.line p{ box-sizing: border-box; - padding: 0 1.15rem; font-size: .44rem; font-weight: 400; color: #C9C6BA; - opacity: 0.41; } .game3Index div.closeIcon{ display: flex; diff --git a/css/game4.css b/css/game4.css index ca2b568..78d8457 100644 --- a/css/game4.css +++ b/css/game4.css @@ -79,6 +79,7 @@ top: 0; background: url(../img/game2/successBgm.png) no-repeat; background-size: 100% 100%; + z-index: 99; } .game4Index .maskBgm:after { content: ""; diff --git a/css/game5.css b/css/game5.css index 423ab60..8bdc15a 100644 --- a/css/game5.css +++ b/css/game5.css @@ -76,6 +76,7 @@ top: 0; background: url(../img/game5/successBgm.png) no-repeat; background-size: 100% 100%; + z-index: 99; } .game5Index .maskBgm:after { content: ""; @@ -206,3 +207,18 @@ } +.game5Index .successBox { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 9.53rem; + height: 5.83rem; + background: url(../img/game5/allWin.png) no-repeat; + background-size: 100% 100%; + /*display: flex;*/ + justify-content: center; + align-items: flex-end; + display: none; + z-index: 99; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 64c80bd..099e526 100644 --- a/css/index.css +++ b/css/index.css @@ -220,4 +220,22 @@ p.bgm { background: rgba(0,0,0,.5); z-index: 999999; border-radius: 5px;*/ -} \ No newline at end of file +} +p.bgm img{ + width: 100%; + height: 100%; + +} + p.bgm img:nth-child(1){ + opacity: 1; +} +p.bgm img:nth-child(2){ + opacity: 0; + position: absolute; + left: 0; + top: 0; +} + +.textList{ + transition: all 1s linear; +} diff --git a/game1.html b/game1.html index 8a7de8f..499eea5 100644 --- a/game1.html +++ b/game1.html @@ -1,6 +1,9 @@
    -

    +

    + + +

    • @@ -26,9 +29,10 @@
    -

    - <

    -

    >

    +
    +

    +

    +
    @@ -60,7 +64,7 @@
    -

    +

    @@ -159,14 +163,21 @@ if(num == 3) { console.log('成功') setTimeout(function() { - $('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png') +// $('.game1Index p.bgm img').attr('src', 'img/game1/successBgm.png') + $('.game1Index p.bgm img').eq(0).animate({ + 'opacity':'0' + },1000) + $('.game1Index p.bgm img').eq(1).animate({ + 'opacity':'1', + 'z-index':'99' + },1000) $('.game1Index .box_wrap').fadeOut(); }, 1500) setTimeout(function() { $('.game1Index .book_box').fadeIn() - $('.game1Index .maskBgm').fadeIn() - }, 2500) + $('.game1Index .maskBgm').fadeIn(1000) + }, 3500) } } $('.game1Next').click(function(){ diff --git a/game2.html b/game2.html index 34abc0e..6eb1c69 100644 --- a/game2.html +++ b/game2.html @@ -1,6 +1,9 @@
    -

    +

    + + +

    • @@ -26,9 +29,10 @@
    -

    - <

    -

    >

    +
    +

    +

    +
    @@ -158,14 +162,20 @@ if(num2 == 3) { console.log('成功') setTimeout(function() { - $('.game2Index p.bgm img').attr('src', 'img/game2/successBgm.png') + $('.game2Index p.bgm img').eq(0).animate({ + 'opacity':'0' + },1000) + $('.game2Index p.bgm img').eq(1).animate({ + 'opacity':'1', + 'z-index':'99' + },1000) $('.game2Index .box_wrap').fadeOut(); }, 1500) setTimeout(function() { $('.game2Index .book_box').fadeIn() - $('.game2Index .maskBgm').fadeIn() - }, 2500) + $('.game2Index .maskBgm').fadeIn(1000) + }, 3500) } } $('.game2Above').click(function(){ diff --git a/game3.html b/game3.html index 21c2975..8f696ee 100644 --- a/game3.html +++ b/game3.html @@ -1,6 +1,9 @@
    -

    +

    + + +

    • @@ -26,9 +29,10 @@
    -

    - <

    -

    >

    +
    +

    +

    +
    @@ -157,14 +161,20 @@ if(num3 == 3) { console.log('成功') setTimeout(function() { - $('.game3Index p.bgm img').attr('src', 'img/game3/successBgm.png') + $('.game3Index p.bgm img').eq(0).animate({ + 'opacity':'0' + },1000) + $('.game3Index p.bgm img').eq(1).animate({ + 'opacity':'1', + 'z-index':'99' + },1000) $('.game3Index .box_wrap').fadeOut(); }, 1500) setTimeout(function() { $('.game3Index .book_box').fadeIn() - $('.game3Index .maskBgm').fadeIn() - }, 2500) + $('.game3Index .maskBgm').fadeIn(1000) + }, 3500) } } $('.game3Above').click(function(){ diff --git a/game4.html b/game4.html index 7884b51..ca45339 100644 --- a/game4.html +++ b/game4.html @@ -1,6 +1,9 @@
    -

    +

    + + +

    • @@ -172,13 +175,19 @@ if(num4 == 3) { console.log('成功') setTimeout(function() { - $('.game4Index p.bgm img').attr('src', 'img/game4/successBgm.png') + $('.game4Index p.bgm img').eq(0).animate({ + 'opacity':'0' + },1000) + $('.game4Index p.bgm img').eq(1).animate({ + 'opacity':'1', + 'z-index':'99' + },1000) $('.game4Index .box_wrap').fadeOut(); }, 1500) setTimeout(function() { $('.game4Index .book_box').fadeIn() - $('.game4Index .maskBgm').fadeIn() + $('.game4Index .maskBgm').fadeIn(1000) video4.play() }, 3500) } diff --git a/game5.html b/game5.html index 03d3ce9..8b782ae 100644 --- a/game5.html +++ b/game5.html @@ -1,6 +1,9 @@
      -

      +

      + + +

      • @@ -59,8 +62,8 @@
        -

        -

        + +

      \ No newline at end of file