优化样式

src/home/FifthSection/index.scss

@@ -1,21 +1,7 @@
-$blue1: #254dea;
-$red1: #e33230;
-$blue2: #0766fb;
-$red2: #f02c66;
-$purple: #6038ff;
-$red3: #f85e55;
-$redPurple: #c13cff;
-$green: #2cb840;
-$bluePurple: #5744f6;
-$orange: #e9862e;
-
 $deg: 36deg;
 $deg2: -36deg;
 
-$bgcolorlist: $blue1 $red1 $blue2 $red2 $purple $red3 $redPurple $green
-  $bluePurple $orange;
-$iconItemList: iconItem1 iconItem2 iconItem3 iconItem4 iconItem5
-  iconItem6 iconItem7 iconItem8 iconItem9 iconItem10;
+$bgcolorlist:#254dea #e33230 #0766fb #f02c66 #6038ff #f85e55 #c13cff #2cb840 #5744f6 #e9862e;
 
 .home-fifth-section {
   min-height: 50vh;
@@ -69,23 +55,27 @@ $iconItemList: iconItem1 iconItem2 iconItem3 iconItem4 iconItem5
       }
     }
 
-    @for $i from 2 to length($bgcolorlist) + 1 {
+    @for $i from 1 to length($bgcolorlist) + 1 {
       li:nth-child(#{$i}) {
         background: nth($bgcolorlist, $i);
         transform: rotate(($i - 1) * $deg);
         transform-origin: 20px 300px;
         span {
           transform: rotate(($i - 1) * $deg2);
-          animation: nth($iconItemList, $i) infinite 20s linear;
+          animation: iconItem#{$i} infinite 20s linear;
+        }
+      }
+
+      @keyframes iconItem#{$i} {
+        0% {
+          transform: rotate(($i - 1) * $deg2);
+        }
+        100% {
+          transform: rotate(($i + 9) * $deg2);
         }
       }
     }
 
-    li:first-child {
-      span {
-        animation: iconItem1 infinite 20s linear;
-      }
-    }
 
     li {
       span {
@@ -112,95 +102,6 @@ $iconItemList: iconItem1 iconItem2 iconItem3 iconItem4 iconItem5
     }
   }
 
-  @keyframes iconItem1 {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(-360deg);
-    }
-  }
-
-  @keyframes iconItem2 {
-    0% {
-      transform: rotate(-36deg);
-    }
-    100% {
-      transform: rotate(-396deg);
-    }
-  }
-
-  @keyframes iconItem3 {
-    0% {
-      transform: rotate(-72deg);
-    }
-    100% {
-      transform: rotate(-432deg);
-    }
-  }
-
-  @keyframes iconItem4 {
-    0% {
-      transform: rotate(-108deg);
-    }
-    100% {
-      transform: rotate(-468deg);
-    }
-  }
-
-  @keyframes iconItem5 {
-    0% {
-      transform: rotate(-144deg);
-    }
-    100% {
-      transform: rotate(-504deg);
-    }
-  }
-
-  @keyframes iconItem6 {
-    0% {
-      transform: rotate(-180deg);
-    }
-    100% {
-      transform: rotate(-540deg);
-    }
-  }
-
-  @keyframes iconItem7 {
-    0% {
-      transform: rotate(-216deg);
-    }
-    100% {
-      transform: rotate(-576deg);
-    }
-  }
-
-  @keyframes iconItem8 {
-    0% {
-      transform: rotate(-252deg);
-    }
-    100% {
-      transform: rotate(-612deg);
-    }
-  }
-
-  @keyframes iconItem9 {
-    0% {
-      transform: rotate(-288deg);
-    }
-    100% {
-      transform: rotate(-648deg);
-    }
-  }
-
-  @keyframes iconItem10 {
-    0% {
-      transform: rotate(-324deg);
-    }
-    100% {
-      transform: rotate(-684deg);
-    }
-  }
 
   .circleBox {
     position: relative;