Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

优化首页样式代码

This commit is contained in:
何童崇 2021-11-26 10:41:21 +08:00
parent 2d8c3c5853
commit 9276136bfe
1 changed files with 33 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/home/FifthSection/index.scss
View File

@ -1,16 +1,21 @@
$blue1: #254dea;
$red1: #e33230;
$blue2: #0766fb;
$red2: #f02c66;
$purple: #6038ff;
$red3: #f85e55;
$redPurple: #c13cff;
$green: #2cb840;
$bluePurple: #5744f6;
$orange: #e9862e;
$blue1:#254dea;
$red1 : #e33230;
$blue2 : #0766fb;
$red2:#f02c66;
$purple:#6038ff;
$red3:#f85e55;
$redPurple:#c13cff;
$green : #2cb840;
$bluePurple:#5744f6;
$orange : #e9862e;
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
$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;
.home-fifth-section {
min-height: 50vh;
@ -40,10 +45,8 @@ $bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
}
.icon-circle {
position: absolute;
// left: 20px;
width: 560px;
height: 560px;
// background-color: #2bebd7;
border-radius: 50%;
animation: iconCircle infinite 20s linear;
@ -65,94 +68,26 @@ $bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
cursor: pointer;
}
}
@for $i from 2 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;
}
}
}
li:first-child {
span {
animation: iconItem infinite 20s linear;
}
}
li:nth-of-type(2) {
background: #e33230;
transform: rotate(36deg);
transform-origin: 20px 300px;
span {
transform: rotate(-36deg);
animation: iconItem2 infinite 20s linear;
}
}
li:nth-of-type(3) {
background: #0766fb;
transform: rotate(72deg);
transform-origin: 20px 300px;
span {
transform: rotate(-72deg);
animation: iconItem3 infinite 20s linear;
}
}
li:nth-of-type(4) {
background: #f02c66;
transform: rotate(108deg);
transform-origin: 20px 300px;
span {
transform: rotate(-108deg);
animation: iconItem4 infinite 20s linear;
}
}
li:nth-of-type(5) {
background: #6038ff;
transform: rotate(144deg);
transform-origin: 20px 300px;
span {
transform: rotate(-144deg);
animation: iconItem5 infinite 20s linear;
}
}
li:nth-of-type(6) {
background: #f85e55;
transform: rotate(180deg);
transform-origin: 20px 300px;
span {
transform: rotate(-180deg);
animation: iconItem6 infinite 20s linear;
}
}
li:nth-of-type(7) {
background: #c13cff;
transform: rotate(216deg);
transform-origin: 20px 300px;
span {
transform: rotate(-216deg);
animation: iconItem7 infinite 20s linear;
}
}
li:nth-of-type(8) {
background: #2cb840;
transform: rotate(252deg);
transform-origin: 20px 300px;
span {
transform: rotate(-252deg);
animation: iconItem8 infinite 20s linear;
}
}
li:nth-of-type(9) {
background: #5744f6;
transform: rotate(288deg);
transform-origin: 20px 300px;
span {
transform: rotate(-288deg);
animation: iconItem9 infinite 20s linear;
}
}
li:nth-of-type(10) {
background: #e9862e;
transform: rotate(324deg);
transform-origin: 20px 300px;
span {
transform: rotate(-324deg);
animation: iconItem10 infinite 20s linear;
animation: iconItem1 infinite 20s linear;
}
}
li {
position: absolute;
span {
position: absolute;
left: 0;
@ -177,7 +112,7 @@ $bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
}
}
@keyframes iconItem {
@keyframes iconItem1 {
0% {
transform: rotate(0deg);
}