From 4b4a0bc52cf467ad179a96739b4006fd3ae42b15 Mon Sep 17 00:00:00 2001
From: Weslie0803 <zhengsx19@mails.tsinghua.edu.cn>
Date: Wed, 26 Oct 2022 21:32:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 animate.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html  | 34 +++++++++++++++++---------
 2 files changed, 92 insertions(+), 12 deletions(-)

diff --git a/animate.css b/animate.css
index cdd4e57..4117349 100644
--- a/animate.css
+++ b/animate.css
@@ -12,6 +12,12 @@
     width: 290px;
     height: 580px;
 }
+.BondRolling {
+    position: absolute;
+    overflow: hidden;
+    width: 290px;
+    height: 580px;
+}
 .CardRolling>ul li {
     /* float: left; */
     width: 290px;
@@ -23,6 +29,12 @@
     width: 290px;
     height: 580px;
 }
+.BondRolling>ul li {
+    list-style-type: none;
+    float: left;
+    width: 290px;
+    height: 580px;
+}
 .CardRolling>ul li img{
     width: 100%;
     height: 100%;
@@ -38,6 +50,13 @@
     top: 0px;
     bottom: 0px;
 }
+.BondRolling>ul li img{
+    max-width: 50px;
+    max-height: 50px;
+    margin-top: 10px;
+    margin-left: 10px;
+    display: block;
+}
 @keyframes runY {
     to {
         transform: translateY(-4640px);
@@ -49,7 +68,7 @@
     }
 }
 .CardRolling>ul {
-    animation: runY 3s linear infinite;
+    /* animation: runY 3s linear infinite; */
     padding-left: 0px ;
 }
 .NumRolling>ul {
@@ -57,6 +76,10 @@
     padding-left: 0px ;
     width: 3190px;
 }
+.BondRolling>ul {
+    animation: runY 3s linear infinite;
+    padding-left: 0px ;
+}
 
 @keyframes CardFlash {
     12.5% {
@@ -110,4 +133,49 @@
     100% {
         background: url(抽奖软件UI/键和方式/8-BCC.png);
     }
+}
+
+@keyframes NumFlash {
+    0% {
+        background: url(抽奖软件UI/数字/0.png);
+    }
+    10% {
+        background: url(抽奖软件UI/数字/1.png);
+    }
+    20% {
+        background: url(抽奖软件UI/数字/2.png);
+    }
+    30% {
+        background: url(抽奖软件UI/数字/3.png);
+    }
+    40% {
+        background: url(抽奖软件UI/数字/4.png);
+    }
+    50% {
+        background: url(抽奖软件UI/数字/5.png);
+    }
+    60% {
+        background: url(抽奖软件UI/数字/6.png);
+    }
+    70% {
+        background: url(抽奖软件UI/数字/7.png);
+    }
+    80% {
+        background: url(抽奖软件UI/数字/8.png);
+    }
+    90% {
+        background: url(抽奖软件UI/数字/9.png);
+    }
+}
+
+.CardUndefined {
+    animation: CardFlash 2s linear infinite;
+}
+
+.NumUndefined {
+    animation: NumFlash 2s linear infinite;
+}
+
+.BondUndefined {
+    animation: BondFlash 2s linear infinite;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e58992..a67d076 100644
--- a/index.html
+++ b/index.html
@@ -48,17 +48,29 @@
                         </div>
                         <div class="NumRolling" >
                             <ul>
-                            <li><img src="抽奖软件UI/数字/0.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/1.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/2.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/3.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/4.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/5.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/6.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/7.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/8.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/9.png" width="50%" height="50%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/0.png" width="50%" height="50%" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
+                            <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
+                            </ul>
+                        </div>
+                        <div class="BondRolling">
+                            <ul>
+                                <li><img src="抽奖软件UI/键和方式/1-H2.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/2-水.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/3-乙炔.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/4-正四面体.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/5-石墨.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/6-丙炔.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/7-简单立方.png"></li>
+                                <li><img src="抽奖软件UI/键和方式/8-BCC.png"></li>
                             </ul>
                         </div>
                     </div>