更改css文件结构

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

Hide file tree

Showing 3 changed files with 114 additions and 59 deletions.
diff --git a/animate.css b/animate.css
@@ -0,0 +1,113 @@
+
+.CardRolling {
+    position: absolute;
+    overflow: hidden;
+    width: 290px;
+    height: 580px;
+    /* display: none; */
+}
+.NumRolling {
+    position: absolute;
+    overflow: hidden;
+    width: 290px;
+    height: 580px;
+}
+.CardRolling>ul li {
+    /* float: left; */
+    width: 290px;
+    height: 580px;
+}
+.NumRolling>ul li {
+    list-style-type: none;
+    float: left;
+    width: 290px;
+    height: 580px;
+}
+.CardRolling>ul li img{
+    width: 100%;
+    height: 100%;
+}
+.NumRolling>ul li img{
+    width: 50%;
+    height: 50%;
+    margin: auto;
+    margin-top: 30%;
+    text-align: center;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+}
+@keyframes runY {
+    to {
+        transform: translateY(-4640px);
+    }
+}
+@keyframes runX {
+    to {
+        transform: translateX(-2900px);
+    }
+}
+.CardRolling>ul {
+    animation: runY 3s linear infinite;
+    padding-left: 0px ;
+}
+.NumRolling>ul {
+    animation: runX 3s linear infinite;
+    padding-left: 0px ;
+    width: 3190px;
+}
+
+@keyframes CardFlash {
+    12.5% {
+        background: url(抽奖软件UI/底色/复合/复合1.png);
+    }
+    25% {
+        background: url(抽奖软件UI/底色/复合/复合2.png);
+    }
+    37.5% {
+        background: url(抽奖软件UI/底色/金属/金属1.png);
+    }
+    50% {
+        background: url(抽奖软件UI/底色/金属/金属2.png);
+    }
+    62.5% {
+        background: url(抽奖软件UI/底色/非金/非金1.png);
+    }
+    75% {
+        background: url(抽奖软件UI/底色/非金/非金2.png);
+    }
+    87.5% {
+        background: url(抽奖软件UI/底色/高分子/高分子1.png);
+    }
+    100% {
+        background: url(抽奖软件UI/底色/高分子/高分子2.png);
+    }
+}
+
+@keyframes BondFlash {
+    12.5% {
+        background: url(抽奖软件UI/键和方式/1-H2.png);
+    }
+    25% {
+        background: url(抽奖软件UI/键和方式/2-水.png);
+    }
+    37.5% {
+        background: url(抽奖软件UI/键和方式/3-乙炔.png);
+    }
+    50% {
+        background: url(抽奖软件UI/键和方式/4-正四面体.png);
+    }
+    62.5% {
+        background: url(抽奖软件UI/键和方式/5-石墨.png);
+    }
+    75% {
+        background: url(抽奖软件UI/键和方式/6-丙炔.png);
+    }
+    87.5% {
+        background: url(抽奖软件UI/键和方式/7-简单立方.png);
+    }
+    100% {
+        background: url(抽奖软件UI/键和方式/8-BCC.png);
+    }
+}
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
         <link rel="shortcut icon" href="favicon.7afe6f60.ico">
         <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
         <link rel="stylesheet" href="scripts.72999ec6.css">
+        <link rel="stylesheet" href="animate.css">
     </head>
     <body>
         <!--[if lt IE 10]>

diff --git a/scripts.72999ec6.css b/scripts.72999ec6.css
@@ -823,62 +823,3 @@ body {
     background-position: 50%;
     background-size: 100% 100%
 }
-
-.CardRolling {
-    position: absolute;
-    overflow: hidden;
-    width: 290px;
-    height: 580px;
-    /* display: none; */
-}
-.NumRolling {
-    position: absolute;
-    overflow: hidden;
-    width: 290px;
-    height: 580px;
-}
-.CardRolling>ul li {
-    /* float: left; */
-    width: 290px;
-    height: 580px;
-}
-.NumRolling>ul li {
-    list-style-type: none;
-    float: left;
-    width: 290px;
-    height: 580px;
-}
-.CardRolling>ul li img{
-    width: 100%;
-    height: 100%;
-}
-.NumRolling>ul li img{
-    width: 50%;
-    height: 50%;
-    margin: auto;
-    margin-top: 30%;
-    text-align: center;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-}
-@keyframes runY {
-    to {
-        transform: translateY(-4640px);
-    }
-}
-@keyframes runX {
-    to {
-        transform: translateX(-2900px);
-    }
-}
-.CardRolling>ul {
-    animation: runY 3s linear infinite;
-    padding-left: 0px ;
-}
-.NumRolling>ul {
-    animation: runX 3s linear infinite;
-    padding-left: 0px ;
-    width: 3190px;
-}