這篇文章主要介紹使用less實現(xiàn)隨機下雪動畫的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供漠河企業(yè)網(wǎng)站建設,專注與做網(wǎng)站、成都網(wǎng)站制作、H5響應式網(wǎng)站、小程序制作等業(yè)務。10年已為漠河眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設公司優(yōu)惠進行中。

冬天來了，設計師說搖搖樂的場景需要隨機下落的雪花動畫，第一時間就想到的方法是canvas比較好，項目非常緊急，然而小程序對canvas支持不夠友好，容易在項目中出現(xiàn)無法預估的兼容性問題 ，馬上又否定了這種想法，想了想用javascript來寫隨機動畫成本又高。既不用canvas也不用javascript來實現(xiàn)，最終決定使用css預處理器less來實現(xiàn)隨機雪花，less怎么可能實現(xiàn)隨機雪花？對于喜歡寫css的人來說，這非常有趣。

上圖的雪花效果還蠻炫酷吧，怎么實現(xiàn)呢？less因為有以下的2個特點，可以嘗試使用它來實現(xiàn)我們的場景

1.遞歸調(diào)用

實際上less并沒有自帶類似javascript的for循環(huán)的功能，但less可以用過引導when來實現(xiàn)條件判斷，簡單的方法也可以讓聰明的程序員簡單實現(xiàn)遞歸調(diào)用

.snow(@n) when (@n > 0) {
 fn()//生成雪花函數(shù)fn(
 .snow((@n - 1));//再次執(zhí)行函數(shù)fn() 
}
.snow(60);//執(zhí)行次數(shù)

2.避免編譯JavaScript 表達式

雪花需要生成的隨機數(shù)，我們需要運用javascript表達式嵌入到less代碼，同時也要避免javascript表達式被less錯誤的編譯，我們需要了解兩個點。

一些 LESS不認識的專有語法，可以在字符串前加上一個 ~，

JavaScript 表達式在less 文件中使用，可以通過反引號的方式使用

于是有了如下隨機位移、隨機時間、隨機大小的代碼

于是有了如下的Less代碼，具體怎么實現(xiàn)請留意詳細的代碼注釋
以下less代碼使用構建后可生產(chǎn)一份隨機css固定雪花文件，決定了每一個雪花有不同的大小、水平位移、垂直位移、出場位置、出場時間，不同的雪花大小，不同的下落速度，用肉眼看到的雪花就像是隨機的，可以在項目上線前嘗試多構建幾次，得到一份均勻分布在窗口的隨機雪花。

* {
 padding: 0;
 margin: 0;
}
html, body {
 height: 100%;
}
//瀏覽器窗口寬度
@windowWidth: 750;
//雪花
.snow {
 &_wrap{
 position: relative;
 width: ~"@{windowWidth}px";
 height: 100%;
 overflow: hidden;
 background: rgba(14,99,69,1);
 margin: 0 auto;
 }
 //雪花初始化大小
 position: absolute;
 width:20px;
 height: 20px;
 &:after{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width:20px;
 height: 20px;
 background-color:#fff;
 opacity:1;
 border-radius: 100%;
 filter:blur(5px);//此處使用css3濾鏡來畫雪花
 }
}
//隨機雪花函數(shù)
.snow(@n) when (@n > 0) {
 .snow_@{n}{
 //水平方向上的位移
 left: ~"`Math.round(Math.random() * @{windowWidth})`px";
 //動畫運行時間8~12秒，保證雪花有不同的移動速度
 animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
 //動畫提前出場時間，也就是垂直方向上位移
 animation-delay: ~"`(-Math.random() * 8 + 0.2).toFixed(2)`s";
 &:after{
  //雪花大小隨機，0.5~1.2
  transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";
 }
 }
 @keyframes ~"snowani_@{n}" {
 0%{
  transform: translateY(0);
 }
 100%{
  //垂直方向上高度，保證雪花有不同的移動速度
  transform: ~"translateY(`Math.round(Math.random() * 200 + 1600)`px)";
 }
 }
 .snow((@n - 1));
}
.snow(60);//生成雪花的數(shù)量

把上面的雪花的代碼構建后如下：

還有HTML，一行代碼的事情

在編輯器中安裝好emmet或webstorm開啟emmet后，輸入下面代碼按下ctrl+e快捷鍵即可生成60個不同命名的雪花標簽

以上是使用less實現(xiàn)隨機下雪動畫的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

分享題目：使用less實現(xiàn)隨機下雪動畫的方法-創(chuàng)新互聯(lián)
URL地址：http://chinadenli.net/article10/ccgcdo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、品牌網(wǎng)站設計、網(wǎng)站設計、自適應網(wǎng)站、虛擬主機、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)