本文介紹了css3進階之less實現星空動畫的示例代碼，分享給大家，具體如下：
效果動圖如下：
預覽鏈接和代碼在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde
知識點預覽
這篇文章的 less技巧 + css技巧 知識點包括：
HTML文檔結構
首先html文件結構很簡單，如下：
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div></div>
第一步：radial-gradient生成漸變背景
設置在html和body標簽上
* { padding: 0; margin: 0;}html, body { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); overflow: hidden; height: 100%;}效果如下：
為了對比一下我畫的不是純黑色背景圖，接著放一張純黑色的圖來對比一下，可以看出來上圖沒有那么黑，有點偏灰
這里radial-gradient參數介紹
ellipse 表明我是用的橢圓漸變，你看下圖就知道怎么用了
// 上圖的參數是radial-gradient(ellipse,#ffffff, #6a6a6a)
也就是顏色是白色#ffffff到灰色#6a6a6a的橢圓漸變
at bottom 這是表明橢圓漸變的圓心在底部，請看下圖具體效果：
// 上圖的參數是radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)
好了，到了這一步，漸變我們就完成了
第二步：box-shadow如何生成成百上千的星星
首先我們要解決3個問題，第一個是如何用less寫循環，請看如下less代碼 ( 詳細解釋在代碼下面 )
2.1 less如何實現循環
舉例如下:
.loop(@counter) when(@counter > 0) { .h@{counter} { padding: (10px*@counter); } .loop((@counter - 1)); //遞歸調用自身}div{ .loop(5);}//編譯輸出div .h5 { padding: 50px;}div .h4 { padding: 40px;}div .h3 { padding: 30px;}div .h2 { padding: 20px;}div .h1 { padding: 10px;}所以我們總結出來less實現循環的辦法就是遞歸調用定義的函數
接著解決第二個問題，就是如何在less里面寫JS表達式
2.2 如何在less里面寫JS表達式
.loop(@counter) when(@counter > 0) { padding: ~`@{counter} + Math.round(2.4)`; .loop(@counter - 1); //遞歸調用自身}div{ .loop(2);}// 生成代碼如下div { padding: 4; padding: 3;}所以我們總結出來在less里面使用js表達式的方法就是用~開頭，然后``包裹表達式
接著解決第三個問題，就是如何用box-shadow屬性生成 成百上千的星星
2.3 如何用less循環在box-shadow屬性上生成 成百上千的星星
這些星星其實就是正方形的小點，我們先生成4個正方形小點
// div{ width:10px; height:10px; box-shadow: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded;}效果如下
這里使用了box-shadow多個值來生成正方形
// 比如以下屬性10px 0px #9bcded 表示，在相對于div元素x軸10px，y軸0px處有一個#9bcded顏色的小點// 因為div本身是width 10px height 10px 是一個正方形，所以它的box-shadow也是正方形box-shadow: 10px 0px #9bcded,width:10px;height:10px;
接著，我們要結合less循環在box-shadow上生成更多的方塊（星星）：
// 首先定義個mixin函數，參數是@n, 條件是只有@n > 0的時候才執行函數里的代碼.mixin(@n) when(@n > 0) { box-shadow+ : ~`Math.round(Math.random() * 2000) + 'px' + ' ' +Math.round(Math.random() * 2000) + 'px #FFF' `; .mixin((@n - 1)); }上面函數主要是box-shadow中，主要包括3個參數
假如我們調用mixin(100)，就生成了在2000 * 2000的背景上 100個白色方塊（星星）
第三步：結合html，生成星星
之前html結構如下
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div></div>
less如下：
// start1生成了長1px，寬1px的星星700個，這是小星星// 小星星代表距離遠的星星，大星星代表距離近的，這樣就有了空間感#start1 { .mixin(700); width: 1px; height: 1px; animation: animStar 50s linear infinite; animation-delay:-10s;}// start2生成了長2px，寬2px的星星200個#start2 { .mixin(200); width: 2px; height: 2px; animation: animStar 100s linear infinite; animation-delay:-8s;}// start3生成了長3px，寬3px的星星100個#start3 { .mixin(100); width: 3px; height: 3px; animation : animStar 150s linear infinite; animation-delay:-5s;}// 動畫效果如下@keyframes animStar { from { transform: translateY(0px) } to { transform: translateY(-2000px) }}本文完結，可以自己去codepen試試效果哦，嘿嘿
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
