3等奖

Weslie0803 · Oct 28, 2022 · c5ceac8 · c5ceac8
1 parent 0dbc448
commit c5ceac8
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 21 deletions.
diff --git a/animate.css b/animate.css
@@ -68,7 +68,7 @@
     }
 }
 .CardRolling>ul {
-    /* animation: runY 3s linear infinite; */
+    animation: runY 3s linear infinite;
     padding-left: 0px ;
 }
 .NumRolling>ul {
@@ -82,56 +82,89 @@
 }
 
 @keyframes CardFlash {
+    0% {
+        background: url(抽奖软件UI/底色/高分子/高分子2.png);
+        background-size: contain;
+    }
     12.5% {
         background: url(抽奖软件UI/底色/复合/复合1.png);
+        background-size: contain;
     }
     25% {
         background: url(抽奖软件UI/底色/复合/复合2.png);
+        background-size: contain;
     }
     37.5% {
         background: url(抽奖软件UI/底色/金属/金属1.png);
+        background-size: contain;
     }
     50% {
         background: url(抽奖软件UI/底色/金属/金属2.png);
+        background-size: contain;
     }
     62.5% {
         background: url(抽奖软件UI/底色/非金/非金1.png);
+        background-size: contain;
     }
     75% {
         background: url(抽奖软件UI/底色/非金/非金2.png);
+        background-size: contain;
     }
     87.5% {
         background: url(抽奖软件UI/底色/高分子/高分子1.png);
+        background-size: contain;
     }
-    100% {
+    to {
         background: url(抽奖软件UI/底色/高分子/高分子2.png);
+        background-size: contain;
     }
 }
 
 @keyframes BondFlash {
+    0% {
+        background: url(抽奖软件UI/键和方式/8-BCC.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
+    }
     12.5% {
-        background: url(抽奖软件UI/键和方式/1-H2.png);
+        background: url(抽奖软件UI/键和方式/1-H2.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     25% {
-        background: url(抽奖软件UI/键和方式/2-水.png);
+        background: url(抽奖软件UI/键和方式/2-水.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     37.5% {
-        background: url(抽奖软件UI/键和方式/3-乙炔.png);
+        background: url(抽奖软件UI/键和方式/3-乙炔.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     50% {
-        background: url(抽奖软件UI/键和方式/4-正四面体.png);
+        background: url(抽奖软件UI/键和方式/4-正四面体.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     62.5% {
-        background: url(抽奖软件UI/键和方式/5-石墨.png);
+        background: url(抽奖软件UI/键和方式/5-石墨.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     75% {
-        background: url(抽奖软件UI/键和方式/6-丙炔.png);
+        background: url(抽奖软件UI/键和方式/6-丙炔.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
     87.5% {
-        background: url(抽奖软件UI/键和方式/7-简单立方.png);
+        background: url(抽奖软件UI/键和方式/7-简单立方.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
-    100% {
-        background: url(抽奖软件UI/键和方式/8-BCC.png);
+    to {
+        background: url(抽奖软件UI/键和方式/8-BCC.png) no-repeat;
+        background-size: contain;
+        background-position: center center;
     }
 }
 
@@ -169,13 +202,40 @@
 }
 
 .CardUndefined {
+    position: absolute;
+    background-size: contain;
+    width: 290px;
+    height: 580px;
     animation: CardFlash 2s linear infinite;
 }
 
 .NumUndefined {
+    position: absolute;
+    width: 100px;
+    height: 100px;
     animation: NumFlash 2s linear infinite;
 }
 
 .BondUndefined {
+    background-repeat: no-repeat;
+    width: 50px;
+    height: 50px;
     animation: BondFlash 2s linear infinite;
+}
+
+#result {
+    margin: 0;
+    transition: transform 2s;
+    transform-style: preserve-3d;
+}
+
+#result>.CardUndefined>img {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    max-width: 150px;
+    max-height: 150px;
 }
diff --git a/change.js b/change.js
@@ -0,0 +1,14 @@
+var toggleExpand = function(){
+    //TODO
+    $("#bg0").parent().toggleClass("ring8card").toggleClass("ring8card2");
+}
+var toggleResult = function(num){
+    //TODO
+    $("#bg0").parent().parent().css("transform", "translateY(-1000px)");
+    $("#bond0").parent().parent().css("transform", "translateY(-1000px)");
+    $("#card0").parent().parent().css("transform", "translateY(-1000px)");
+    $("#n1").attr("src", "抽奖软件UI/数字/"+num+".png")
+    $("#result").css("display"," block");
+    $("#result").css("transform"," translateZ(-1000px)");
+    $("#result").css("transform"," translateZ(0)");
+}
diff --git a/index.html b/index.html
@@ -63,7 +63,22 @@
             </div>
         </div>
         <div id="container" class="container">
-            <div class="row">
+            <div id="stage">
+                <div id="result" style="display: none;">
+                    <div class="showNum CardUndefined">
+                        <img id="n1" src="抽奖软件UI/数字/0.png">
+                    </div>
+                    <div style="background-color: hsla(0,0%,100%,.6); position: absolute;width: 50px;
+                    height: 50px;
+                    left: 40px;
+                    top: 40px;">
+                        <div class="BondUndefined"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="container" class="container">
+            <div class="row" style="display: none;">
                 <div class="col-xs-4">
                     <div id="num1" class="showNum">
                         <div class="CardRolling" >
@@ -142,5 +157,6 @@
         </script>
         <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
         <script src="index.js"></script>
+        <script src="change.js"></script>
     </body>
 </html>
diff --git a/index.js b/index.js
@@ -151,6 +151,8 @@ $(document).ready(function () {
   }
   var toggleThirdPrize = function () {
     $(".row").css("display", "none");
+    $("#result").css("display", "none");
+    $("#result").css("transform", "translateZ(-500px)");
     //TODO
   }
     // Lottery
@@ -205,10 +207,15 @@ $(document).ready(function () {
       } else if(prize === 3){
         if(event.which === 32 && pressTimes === 0){
           // 旋转变形
-          // 抽出数字
+          toggleExpand();
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 1){
+          // 抽出数字
+          toggleResult(numArr[2])
+          pressTimes++;
+        } else if(event.which === 32 && pressTimes === 2){
           // 重置
+          toggleThirdPrize();
           pressTimes = 0;
         }
       } else if(prize === 2){
@@ -220,6 +227,7 @@ $(document).ready(function () {
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 2) {
           // 重置
+          toggleSecondPrize();
           pressTimes = 0;
         }
       } else if(prize === 1){
@@ -228,6 +236,7 @@ $(document).ready(function () {
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 1) {
           // 清空，重置
+          toggleFirstPrize();
           pressTimes = 0;
         }
       } else if(prize === 0){
@@ -239,6 +248,7 @@ $(document).ready(function () {
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 2){
           // 清空，重置
+          toggleSpecialPrize();
           pressTimes = 0;
         }
       }

diff --git a/new3d.css b/new3d.css
@@ -27,29 +27,57 @@
     max-width: 200px;
     max-height: 400px;
 }
-
 .ring8card>.eine {
-    transform: translateZ(500px);
+    transform: translateZ(300px);
 }
 .ring8card>.zwei {
-    transform: rotateY(45deg) translateZ(500px);
+    transform: rotateY(45deg) translateZ(300px);
 }
 .ring8card>.drei {
-    transform: rotateY(90deg) translateZ(500px);
+    transform: rotateY(90deg) translateZ(300px);
 }
 .ring8card>.viel {
-    transform: rotateY(135deg) translateZ(500px);
+    transform: rotateY(135deg) translateZ(300px);
 }
 .ring8card>.funf {
-    transform: rotateY(180deg) translateZ(500px);
+    transform: rotateY(180deg) translateZ(300px);
 }
 .ring8card>.sechs {
-    transform: rotateY(225deg) translateZ(500px);
+    transform: rotateY(225deg) translateZ(300px);
 }
 .ring8card>.seben {
-    transform: rotateY(270deg) translateZ(500px);
+    transform: rotateY(270deg) translateZ(300px);
 }
 .ring8card>.acht {
+    transform: rotateY(315deg) translateZ(300px);
+}
+
+.ring8card2>.plane img {
+    max-width: 200px;
+    max-height: 400px;
+}
+.ring8card2>.eine {
+    transform: translateZ(500px);
+}
+.ring8card2>.zwei {
+    transform: rotateY(45deg) translateZ(500px);
+}
+.ring8card2>.drei {
+    transform: rotateY(90deg) translateZ(500px);
+}
+.ring8card2>.viel {
+    transform: rotateY(135deg) translateZ(500px);
+}
+.ring8card2>.funf {
+    transform: rotateY(180deg) translateZ(500px);
+}
+.ring8card2>.sechs {
+    transform: rotateY(225deg) translateZ(500px);
+}
+.ring8card2>.seben {
+    transform: rotateY(270deg) translateZ(500px);
+}
+.ring8card2>.acht {
     transform: rotateY(315deg) translateZ(500px);
 }