欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3進階之less實現(xiàn)星空動畫的示例代碼

  發(fā)布時間：2019-09-10 15:50:55   作者：lio-mengxiang   我要評論
這篇文章主要介紹了css3進階之less實現(xiàn)星空動畫的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文介紹了css3進階之less實現(xiàn)星空動畫的示例代碼，分享給大家，具體如下：

效果動圖如下：

 

預(yù)覽鏈接和代碼在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde

 知識點預(yù)覽

這篇文章的 less技巧 + css技巧 知識點包括：

  • less如何寫循環(huán)
  • less里如何使用js表達式
  • css3屬性: box-shadow如何生成成百上千的星星
  • css3屬性: background: radial-gradient徑向漸變，如何生成漸變的背景色

HTML文檔結(jié)構(gòu)

首先html文件結(jié)構(gòu)很簡單，如下：

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

第一步：radial-gradient生成漸變背景

設(shè)置在html和body標簽上

* {
    padding: 0;
    margin: 0;
}

html, body {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    height: 100%;
}

效果如下：

為了對比一下我畫的不是純黑色背景圖，接著放一張純黑色的圖來對比一下，可以看出來上圖沒有那么黑，有點偏灰

 

這里radial-gradient參數(shù)介紹

ellipse 表明我是用的橢圓漸變，你看下圖就知道怎么用了

// 上圖的參數(shù)是
radial-gradient(ellipse,#ffffff, #6a6a6a)

也就是顏色是白色#ffffff到灰色#6a6a6a的橢圓漸變

at bottom 這是表明橢圓漸變的圓心在底部，請看下圖具體效果：

// 上圖的參數(shù)是
radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)

好了，到了這一步，漸變我們就完成了

第二步：box-shadow如何生成成百上千的星星

首先我們要解決3個問題，第一個是如何用less寫循環(huán)，請看如下less代碼 ( 詳細解釋在代碼下面 )

2.1 less如何實現(xiàn)循環(huán)

舉例如下:

.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px*@counter);
  }
  .loop((@counter - 1)); //遞歸調(diào)用自身
}
div{
  .loop(5);
}

//編譯輸出
div .h5 {
  padding: 50px;
}
div .h4 {
  padding: 40px;
}
div .h3 {
  padding: 30px;
}
div .h2 {
  padding: 20px;
}
div .h1 {
  padding: 10px;
}
  • .loop(@counter) when(@counter > 0) 是less里面的函數(shù)，意思是定義了一個loop函數(shù)
  • @counter是傳入函數(shù)的變量
  • when(@counter > 0) 意思是當(dāng)變量的值@counter > 0的時候，這個函數(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(@counter > 0) {
  padding: ~`@{counter} + Math.round(2.4)`;
  .loop(@counter - 1); //遞歸調(diào)用自身
}
div{
  .loop(2);
}

// 生成代碼如下
div {
  padding: 4;
  padding: 3;
}

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

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

2.3 如何用less循環(huán)在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;

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

// 首先定義個mixin函數(shù)，參數(shù)是@n, 條件是只有@n > 0的時候才執(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個參數(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>
    <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) }
}

本文完結(jié)，可以自己去codepen試試效果哦，嘿嘿

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論