ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML+CSS+JSで雪の結晶の飛行を実現(コードシェアリング)
HTML CSS JS を使用して降雪効果を実現するにはどうすればよいですか?次の記事では、HTML CSS JS で雪の結晶を実装する方法の例を紹介します。
南部出身の友人の多くは、雪をあまり見たことがないか、見たことがないかもしれません。今日は、雪の景色をシミュレートする小さなデモをお届けします。まず、ランニング効果を見てみましょう
クリックすると、オンライン操作を確認できます: http://haiyong.site/xiaxue
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 コード:まず、タイマーを開始して雪の結晶画像を追加します。
は、
setInterval(function(){ var img = $("<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif" class="lazy" src='images/snow.png' 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)コメントを外すと、下の写真のように、降っている雪が消えていくのがわかります。
css ビデオ チュートリアル)
以上がHTML+CSS+JSで雪の結晶の飛行を実現(コードシェアリング)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。