sass遍历
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta content=always name=referrer> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="format-detection" content="telephone=no"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <title></title> <link href="../../css/base.css" rel="stylesheet"/> <link href="../../css/imghover/hover3.css" rel="stylesheet"/> </head> <body> <div style="position:relative;"> <div id="caseBlanche1"> <div id="rond"> <div id="test"></div> </div> <div id="load"> <p>123</p> </div> </div> <div id="caseBlanche2"> <div id="rond"> <div id="test"></div> </div> <div id="load"> <p></p> </div> </div> <div id="caseBlanche3"> <div id="rond"> <div id="test"></div> </div> <div id="load"> <p></p> </div> </div> <div id="caseBlanche4"> <div id="rond"> <div id="test"></div> </div> <div id="load"> <p></p> </div> </div> <div id="caseBlanche5"> <div id="rond"> <div id="test"></div> </div> <div id="load"> <p></p> </div> </div> </div> </body> </html>
SCSS
$p:1;
$background:#0CF #06F #F60 #F0F #CC3;
$border-color:#0CF #06F #F60 #F0F #CC3;
@each $left in -10px,100px,210px,320px,430px{
#caseBlanche#{$p}{
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left:$left;
#load{
background: nth($background,$p);
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px;
p {
line-height: 80px;
}
}
#test{
background: nth($background,$p);
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px;
}
#rond{
border-style: solid;
border-width: 1px;
border-color: nth($border-color,$p) ;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite;
}
}
$p:$p+1;
}
@keyframes rond {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rond {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}
SCSS 转换成 CSS
#caseBlanche1 {
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: -10px; }
#caseBlanche1 #load {
background: #0CF;
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px; }
#caseBlanche1 #load p {
line-height: 80px; }
#caseBlanche1 #test {
background: #0CF;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px; }
#caseBlanche1 #rond {
border-style: solid;
border-width: 1px;
border-color: #0CF;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite; }
#caseBlanche2 {
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: 100px; }
#caseBlanche2 #load {
background: #06F;
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px; }
#caseBlanche2 #load p {
line-height: 80px; }
#caseBlanche2 #test {
background: #06F;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px; }
#caseBlanche2 #rond {
border-style: solid;
border-width: 1px;
border-color: #06F;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite; }
#caseBlanche3 {
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: 210px; }
#caseBlanche3 #load {
background: #F60;
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px; }
#caseBlanche3 #load p {
line-height: 80px; }
#caseBlanche3 #test {
background: #F60;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px; }
#caseBlanche3 #rond {
border-style: solid;
border-width: 1px;
border-color: #F60;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite; }
#caseBlanche4 {
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: 320px; }
#caseBlanche4 #load {
background: #F0F;
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px; }
#caseBlanche4 #load p {
line-height: 80px; }
#caseBlanche4 #test {
background: #F0F;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px; }
#caseBlanche4 #rond {
border-style: solid;
border-width: 1px;
border-color: #F0F;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite; }
#caseBlanche5 {
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: 430px; }
#caseBlanche5 #load {
background: #CC3;
color: #fff;
text-align: center;
position: absolute;
top: 32px;
left: 26px;
height: 80px;
width: 80px;
border-radius: 40px; }
#caseBlanche5 #load p {
line-height: 80px; }
#caseBlanche5 #test {
background: #CC3;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 10px;
margin: 5px; }
#caseBlanche5 #rond {
border-style: solid;
border-width: 1px;
border-color: #CC3;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 15px;
animation: rond 3s infinite;
-webkit-animation: rond 3s infinite; }
@keyframes rond {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
@-webkit-keyframes rond {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
/*# sourceMappingURL=hover3.css.map */
