您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在css3中使用less實(shí)現(xiàn)一個(gè)星空動(dòng)畫,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
首先html文件結(jié)構(gòu)很簡(jiǎn)單,如下:
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div> </div>
第一步:radial-gradient生成漸變背景
設(shè)置在html和body標(biāo)簽上
* { padding: 0; margin: 0; } html, body { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); overflow: hidden; height: 100%; }
效果如下:
為了對(duì)比一下我畫的不是純黑色背景圖,接著放一張純黑色的圖來對(duì)比一下,可以看出來上圖沒有那么黑,有點(diǎn)偏灰
這里radial-gradient參數(shù)介紹
ellipse 表明我是用的橢圓漸變,你看下圖就知道怎么用了
// 上圖的參數(shù)是 radial-gradient(ellipse,#ffffff, #6a6a6a)
也就是顏色是白色#ffffff到灰色#6a6a6a的橢圓漸變
at bottom 這是表明橢圓漸變的圓心在底部,請(qǐng)看下圖具體效果:
// 上圖的參數(shù)是 radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)
好了,到了這一步,漸變我們就完成了
第二步:box-shadow如何生成成百上千的星星
首先我們要解決3個(gè)問題,第一個(gè)是如何用less寫循環(huán),請(qǐng)看如下less代碼 ( 詳細(xì)解釋在代碼下面 )
2.1 less如何實(shí)現(xiàn)循環(huán)
舉例如下:
.loop(@counter) when(@counter > 0) { .h@{counter} { padding: (10px*@counter); } .loop((@counter - 1)); //遞歸調(diào)用自身 } div{ .loop(5); } //編譯輸出 div .h6 { padding: 50px; } div .h5 { padding: 40px; } div .h4 { padding: 30px; } div .h3 { padding: 20px; } div .h2 { padding: 10px; }
.loop(@counter) when(@counter > 0) 是less里面的函數(shù),意思是定義了一個(gè)loop函數(shù)
@counter是傳入函數(shù)的變量
when(@counter > 0) 意思是當(dāng)變量的值@counter > 0的時(shí)候,這個(gè)函數(shù)才會(huì)執(zhí)行
.loop((@counter - 1))這是遞歸調(diào)用
所以我們總結(jié)出來less實(shí)現(xiàn)循環(huán)的辦法就是遞歸調(diào)用定義的函數(shù)
接著解決第二個(gè)問題,就是如何在less里面寫JS表達(dá)式
2.2 如何在less里面寫JS表達(dá)式
.loop(@counter) when(@counter > 0) { padding: ~`@{counter} + Math.round(2.4)`; .loop(@counter - 1); //遞歸調(diào)用自身 } div{ .loop(2); } // 生成代碼如下 div { padding: 4; padding: 3; }
所以我們總結(jié)出來在less里面使用js表達(dá)式的方法就是用~開頭,然后``包裹表達(dá)式
接著解決第三個(gè)問題,就是如何用box-shadow屬性生成 成百上千的星星
2.3 如何用less循環(huán)在box-shadow屬性上生成 成百上千的星星
這些星星其實(shí)就是正方形的小點(diǎn),我們先生成4個(gè)正方形小點(diǎn)
// div { width:10px; height:10px; box-shadow: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded; }
效果如下
這里使用了box-shadow多個(gè)值來生成正方形
// 比如以下屬性10px 0px #9bcded 表示,在相對(duì)于div元素x軸10px,y軸0px處有一個(gè)#9bcded顏色的小點(diǎn) // 因?yàn)閐iv本身是width 10px height 10px 是一個(gè)正方形,所以它的box-shadow也是正方形 box-shadow: 10px 0px #9bcded, width:10px; height:10px;
接著,我們要結(jié)合less循環(huán)在box-shadow上生成更多的方塊(星星):
// 首先定義個(gè)mixin函數(shù),參數(shù)是@n, 條件是只有@n > 0的時(shí)候才執(zhí)行函數(shù)里的代碼 .mixin(@n) when(@n > 0) { box-shadow+ : ~`Math.round(Math.random() * 2000) + 'px' + ' ' +Math.round(Math.random() * 2000) + 'px #FFF' `; .mixin((@n - 1)); }
上面函數(shù)主要是box-shadow中,主要包括3個(gè)參數(shù)
生成了x軸是0-2000隨機(jī)數(shù)的值(Math.round(Math.random() * 2000) + 'px')
生成了y軸是0-2000隨機(jī)數(shù)的值(Math.round(Math.random() * 2000) + 'px #FFF' `)
顏色是#FFF
假如我們調(diào)用mixin(100),就生成了在2000 * 2000的背景上 100個(gè)白色方塊(星星)
第三步:結(jié)合html,生成星星
之前html結(jié)構(gòu)如下
<div> <div id="start1"></div> <div id="start2"></div> <div id="start3"></div> </div>
less如下:
// start1生成了長(zhǎng)1px,寬1px的星星700個(gè),這是小星星 // 小星星代表距離遠(yuǎn)的星星,大星星代表距離近的,這樣就有了空間感 #start1 { .mixin(700); width: 1px; height: 1px; animation: animStar 50s linear infinite; animation-delay:-10s; } // start2生成了長(zhǎng)2px,寬2px的星星200個(gè) #start2 { .mixin(200); width: 2px; height: 2px; animation: animStar 100s linear infinite; animation-delay:-8s; } // start3生成了長(zhǎng)3px,寬3px的星星100個(gè) #start3 { .mixin(100); width: 3px; height: 3px; animation : animStar 150s linear infinite; animation-delay:-5s; } // 動(dòng)畫效果如下 @keyframes animStar { from { transform: translateY(0px) } to { transform: translateY(-2000px) } }
上述就是小編為大家分享的怎么在css3中使用less實(shí)現(xiàn)一個(gè)星空動(dòng)畫了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。