第css3進階之less實現(xiàn)星空動畫的示例代碼.loop(@counter)when(@counter0)是less里面的函數(shù)，意思是定義了一個loop函數(shù)

@counter是傳入函數(shù)的變量

when(@counter0)意思是當變量的值@counter0的時候，這個函數(shù)才會執(zhí)行

.loop((@counter-1))這是遞歸調(diào)用

所以我們總結(jié)出來less實現(xiàn)循環(huán)的辦法就是遞歸調(diào)用定義的函數(shù)

接著解決第二個問題，就是如何在less里面寫JS表達式

2.2如何在less里面寫JS表達式

.loop(@counter)when(@counter0){

padding:~`@{counter}+Math.round(2.4)`;

.loop(@counter-1);//遞歸調(diào)用自身

.loop(2);

//生成代碼如下

div{

padding:4;

padding:3;

}

所以我們總結(jié)出來在less里面使用js表達式的方法就是用~開頭，然后``包裹表達式

接著解決第三個問題，就是如何用box-shadow屬性生成成百上千的星星

2.3如何用less循環(huán)在box-shadow屬性上生成成百上千的星星

這些星星其實就是正方形的小點，我們先生成4個正方形小點

width:10px;

height:10px;

box-shadow:10px0px#9bcded,50px0px#9bcded,10px40px#9bcded,50px40px#9bcded;

}

效果如下

這里使用了box-shadow多個值來生成正方形

//比如以下屬性10px0px#9bcded表示，在相對于div元素x軸10px，y軸0px處有一個#9bcded顏色的小點

//因為div本身是width10pxheight10px是一個正方形，所以它的box-shadow也是正方形

box-shadow:10px0px#9bcded,

width:10px;

height:10px;

接著，我們要結(jié)合less循環(huán)在box-shadow上生成更多的方塊（星星）：

//首先定義個mixin函數(shù)，參數(shù)是@n,條件是只有@n0的時候才執(zhí)行函數(shù)里的代碼

.mixin(@n)when(@n0){

box-shadow+:~`Math.round(Math.random()*2000)+'px'+''+Math.round(Math.random()*2000)+'px#FFF'`;

.mixin((@n-1));

}

上面函數(shù)主要是box-shadow中，主要包括3個參數(shù)

生成了x軸是0-2000隨機數(shù)的值（Math.round(Math.random()*2000)+'px'）

生成了y軸是0-2000隨機數(shù)的值（Math.round(Math.random()*2000)+'px#FFF'`）

顏色是#FFF

假如我們調(diào)用mixin(100)，就生成了在2000*2000的背景上100個白色方塊（星星）

第三步：結(jié)合html，生成星星

之前html結(jié)構(gòu)如下

div

divid=start1/div

divid=start2/div

divid=start3/div

/div

less如下：

//start1生成了長1px，寬1px的星星700個，這是小星星

//小星星代表距離遠的星星，大星星代表距離近的，這樣就有了空間感

#start1{

.mixin(700);

width:1px;

height:1px;

animation:animStar50slinearinfinite;

animation-delay:-10s;

//start2生成了長2px，寬2px的星星200個

#start2{

.mixin(200);

width:2px;

height:2px;

animation:animStar100slinearinfinite;

animation-delay:-8s;

//start3生成了長3px，寬3px的星星100個

#start3{

.mixin(100);

width:3px;

height:3px;

animation:animStar150slinearinfinite;

animation-delay:-5s;

//動畫效果如下

@keyframesanimStar{

from{transform:translateY(0px)}