diff --git a/src/home/FifthSection/index.scss b/src/home/FifthSection/index.scss index 76d39ce3a..054bb4a13 100644 --- a/src/home/FifthSection/index.scss +++ b/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;