动画效果

Weslie0803 · Oct 26, 2022 · 4b4a0bc · 4b4a0bc
1 parent d5fc9a3
commit 4b4a0bc
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 12 deletions.
diff --git 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,14 +68,18 @@
     }
 }
 .CardRolling>ul {
-    animation: runY 3s linear infinite;
+    /* animation: runY 3s linear infinite; */
     padding-left: 0px ;
 }
 .NumRolling>ul {
     animation: runX 3s linear infinite;
     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;
 }
diff --git 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>