HTML+CSS+JS는 눈송이가 날아다니는 것을 실현합니다(코드 공유)

HTML+CSS+JS를 사용하여 눈 내리는 효과를 얻는 방법은 무엇입니까? 다음 기사에서는 날아다니는 눈송이를 구현하기 위해 HTML+CSS+JS를 사용하는 예를 여러분과 공유할 것입니다. 이것이 여러분에게 도움이 되기를 바랍니다.

남쪽의 많은 친구들은 눈이 내리는 것을 많이 본 적이 없을 수도 있습니다. 오늘은 눈이 내리는 장면을 시뮬레이션하는 작은 데모를 가져왔습니다. 먼저 달리기 효과를 살펴보겠습니다.

클릭하시면 됩니다. 온라인에서 보기 실행: http://haiyong.site/xiaxue

먼저 프로젝트 구조, 눈송이 그림, .html 파일 및 jquery-1.4.2.js

에서 사용하는 눈송이 그림을 살펴보세요.

여기에 올려 놓았고, 아니면 이미지 주소 https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png를 직접 사용해도 됩니다. 전적으로 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 코드:

먼저 타이머를 켜서 눈송이 이미지를 추가하세요. 여기에 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40" class="lazy" alt="HTML+CSS+JS는 눈송이가 날아다니는 것을 실현합니다(코드 공유)" >可以改成<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40" class="lazy" alt="HTML+CSS+JS는 눈송이가 날아다니는 것을 실현합니다(코드 공유)" >

setInterval(function(){
var img = $("<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40"  class="lazy"  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를 의미합니다. the picture

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 영상 튜토리얼)

위 내용은 HTML+CSS+JS는 눈송이가 날아다니는 것을 실현합니다(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!