CSS3 アドバンス LESS で星空アニメーションを実装するサンプルコード

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

* {
    パディング: 0;
    マージン: 0;
}

html、本文{
    背景: 放射状グラデーション(下部に楕円、#1B2735 0%、#090A0F 100%);
    オーバーフロー: 非表示;
    高さ: 100%;
}

// 上の画像のパラメータは、radial-gradient(ellipse,#ffffff, #6a6a6a) です。

// 上の画像のパラメータは、radial-gradient(ellipse at bottom,#ffffff, #6a6a6a) です。

.loop(@counter) @counter > 0 の場合 {
  .h@{カウンター} {
    パディング: (10px*@counter);
  }
  .loop((@counter - 1)); // 自分自身を再帰的に呼び出す}
div{
  .ループ(5);
}

//コンパイルして出力 div .h5 {
  パディング: 50px;
}
div.h4 {
  パディング: 40px;
}
div.h3{
  パディング: 30px;
}
div.h2{
  パディング: 20px;
}
div.h1{
  パディング: 10px;
}

.loop(@counter) @counter > 0 の場合 {
  パディング: ~`@{counter} + Math.round(2.4)`;
  .loop(@counter - 1); // 自分自身を再帰的に呼び出す}
div{
  .ループ(2);
}

//次のコードを生成します div {
  パディング: 4;
  パディング: 3;
}

// 
分割
{
	幅:10px;
	高さ:10px;
	ボックスの影: 10px 0px #9bcded、50px 0px #9bcded、10px 40px #9bcded、50px 40px #9bcded;
}

// たとえば、次の属性 10px 0px #9bcded は、div 要素を基準として、x 軸の 10px と y 軸の 0px に #9bcded 色の小さな点があることを意味します。 // div 自体は幅 10px、高さ 10px の正方形であるため、そのボックス シャドウも正方形のボックス シャドウです: 10px 0px #9bcded、
幅:10px;
高さ:10px;

// まず、パラメータ@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));
 }

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

// start1 は、長さ 1 ピクセル、幅 1 ピクセルの星を 700 個生成します。これらは小さな星です。// 小さな星は遠くにある星を表し、大きな星は近くにある星を表すため、空間の感覚が生まれます。#start1 {
    .mixin(700);
    幅: 1px;
    高さ: 1px;
    アニメーション: animStar 50 秒線形無限;
    アニメーション遅延:-10秒;
}
// start2 は長さ 2px、幅 2px の星を 200 個生成します #start2 {
    .mixin(200);
    幅: 2px;
    高さ: 2px;
    アニメーション: animStar 100 秒線形無限;
    アニメーション遅延:-8秒;
}
// start3 は長さ 3px、幅 3px の星を 100 個生成します #start3 {
    .mixin(100);
    幅: 3px;
    高さ: 3px;
    アニメーション：animStar 150秒線形無限;
    アニメーション遅延:-5秒;
}
// アニメーション効果は以下のとおりです @keyframes animStar {
    { transform: translateY(0px) } から
    { transform: translateY(-2000px) } に変更
}