HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）-CSSチュートリアル-php.cn

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

青灯夜游

リリース： 2022-01-19 09:32:26

転載

3271 人が閲覧しました

HTML CSS JS を使用して降雪効果を実現するにはどうすればよいですか?次の記事では、HTML CSS JS で雪の結晶を実装する方法の例を紹介します。

南部出身の友人の多くは、雪をあまり見たことがないか、見たことがないかもしれません。今日は、雪の景色をシミュレートする小さなデモをお届けします。まず、ランニング効果を見てみましょう

クリックすると、オンライン操作を確認できます: http://haiyong.site/xiaxue

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

#まず、プロジェクトの構造、雪の結晶の写真、 HTML ファイルと jquery-1.4.2.js

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

で使用されているスノーフレーク画像をここに配置しました。または、画像アドレスを直接使用することもできます: https:// img.php .cn/upload/article/000/000/024/61dea8bfbe598211.png 冒頭に画像があり、内容はすべてJSベースです。

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

HTML コード

以下は HTML の内容です。大したことはありません

nbsp;html>

	
		<meta>
		<title>海拥| 雪一片一片</title>
		<meta>
		<meta>
		<meta> 
		<meta>
		<meta>
		<link>
		<style>
			body{
				background-color: #000000;
				margin: 0;/* 去掉自带的外边距 */
			}
			img{
				position: absolute;
			}
		</style>
	
	
		<script></script>

ログイン後にコピー

JS コード:

まず、タイマーを開始して雪の結晶画像を追加します。

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング） は、

setInterval(function(){
var img = $("<img  src=&#39;images/snow.png&#39; alt="HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）" >");
$("body").append(img);

ログイン後にコピー

雪の結晶のサイズはここでは 10 ～ 20px に設定されており、次の式は (0 ～ 10 10) を意味します。 )px

var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");

ログイン後にコピー

画面幅を取得

var w = $(window).width();

ログイン後にコピー

値の範囲は0-画面幅-スノーフレーク幅

var left =parseInt(Math.random()*(w-size));

ログイン後にコピー

取得したランダムな1eftを画像に与えます

img.css("left",left+"px");

ログイン後にコピー

雪の結晶の動きのアニメーションを追加し、雪の結晶の動きの距離 = 画面の高さ - 雪の結晶のサイズを取得します。

var top = $(window).height()-size;

ログイン後にコピー

以下のコメント内のコードはキャッシュをクリアするために使用されます。追加するかどうかは自由です。

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//当动画完成时执行此代码，清除缓存
	img.remove();
	//console.log($("img").length);
}); */
},10)

ログイン後にコピー

コメントを外すと、下の写真のように、降っている雪が消えていくのがわかります。

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

雪を見たい方は、コメントアウトしてプレビューしてください効果は次のとおりです

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）

#実現したい効果はここで完成です。実行時間が長すぎると、過剰なエラーが発生する可能性があります。コードの最後のコメントの内容をコメント解除して HTML を変更すると、下の雪が徐々にフェードアウトして削除されます。ただし、雪はかなり見栄えが良いと思うので、変更しません。次のように溶けないようにしてください:

HTML+CSS+JSで雪の結晶の飛行を実現（コードシェアリング）