lessを使ってランダムな雪アニメーションを実装する方法を詳しく解説

冬が近づいています。シェイク ロックのシーンには、ランダムに降る雪の結晶のアニメーションが必要であるとデザイナーは言いました。しかし、このプロジェクトは緊急ではありません。サポートを求めるのに十分フレンドリーで、プロジェクトに参加するのは簡単でした。プロジェクトでは予期せぬ互換性の問題が発生しました。よく考えた結果、JavaScript でランダムなアニメーションを記述するのはコストがかかりすぎるため、このアイデアはすぐに却下されました。これを実現するために Canvas も JavaScript も使用されませんでしたが、最終的に、CSS プリプロセッサの使用を減らしてランダムな雪片を実現することにしました。これは、CSS を書くのが好きな人にとっては非常に興味深いものです。 [推奨チュートリアル: CSS チュートリアル ]

上の写真の雪の結晶効果は非常にクールですが、どうすれば実現できますか? less には次の 2 つの特徴があるため、このシナリオを実現するためにこれを使用してみてください。

1. 再帰呼び出し

実際には、less には JavaScript の for ループのような機能はありません。ただし、Less では、ガイド付きのタイミングを使用して条件判断を実装できます。この単純な方法により、賢明なプログラマーは JavaScript 式のコンパイルを回避できます。

Snowflake はランダム性を生成する必要があります。 、less コードに埋め込むには JavaScript 式を使用する必要があり、同時に、less によって JavaScript 式が誤ってコンパイルされることを避ける必要があるという 2 つの点を理解する必要があります。

LESS が認識しない一部の独自の構文については、文字列の前に ~ を追加できます。

JavaScript 式は、less ファイルで使用され、バッククォートとともに使用できます。したがって、次のようなランダムな変位、ランダムな時間、ランダムなサイズのコードが得られます。

次のような Less コードがあります。実装方法については、コードの詳細なコメントに注意してください。

次の Less コードは、次のとおりです。構築後に使用 それぞれの雪片が異なるサイズ、水平方向の変位、垂直方向の変位、出現位置、出現時間、異なる雪片のサイズ、および異なる落下速度を持つことを決定するランダムな CSS 固定雪片ファイルを生成します。 肉眼で見える雪の結晶。 Randomly と同様に、プロジェクトがオンラインになる前に何度かビルドを試みて、ウィンドウ内にランダムなスノーフレークを均等に分散させることができます。

.snow(@n) when (@n > 0) {
 fn()//生成雪花函数fn(
 .snow((@n - 1));//再次执行函数fn() 
}
.snow(60);//执行次数

上記のスノーフレーク コードは次のように構成されています:

HTML、1 行のコード

emmet のインストール後のエディター内またはウェブストームを実行して emmet を開き、次のコードを入力して Ctrl e ショートカット キーを押して、異なる名前を持つ 60 個のスノーフレーク タグを生成します。

上記は記事全体です。内容が一致することを願っています。この記事の内容は、みんなの勉強や仕事に役立つものです。質問がある場合は、メッセージを残して連絡してください。

以上がlessを使ってランダムな雪アニメーションを実装する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。