이 기사의 예에서는 JS를 사용하여 멋진 웹페이지 불꽃놀이 애니메이션 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. JS를 사용하여 구현된 매우 멋진 웹페이지 불꽃놀이 애니메이션 효과를 JS에 적용하여 애니메이션을 만들 수 있습니다 코드 복사 코드는 다음과 같습니다. 멋진 웹페이지 불꽃놀이 효과 <br> .fire{display:block; 오버플로:숨김; 글꼴 크기:12px; 위치:절대};<br> 본문{오버플로:숨겨진; 배경:#000}<br> html{오버플로:숨김; 배경:#000}<br> </스타일><br> <br> </본문><br> <script type="text/javascript"><br> var Fire = function(r, color) {<br> this.radius = r || 12;<br> this.color = 색상;<br> this.xpos = 0;<br> this.ypos = 0;<br> this.zpos = 0;<br> this.vx = 0;<br> this.vy = 0;<br> this.vz = 0;<br> this.mass = 1;<br> this.x =0;<br> this.y=0;<br> this.p = document.createElement("span");<br> this.p.className = "불";<br> this.p.innerHTML = "*";<br> this.p.style.fontSize = this.radius "px";<br> this.p.style.color = "#" this.color;<br> }<br> Fire.prototype = {<br> 추가: 함수(부모) {<br> parent.appendChild(this.p);<br> },<br> setSize: 함수(크기) {<br> this.p.style.fontSize = this.radius * scale "px";<br> },<br> setPosition:함수(x, y) {<br> this.p.style.left = x "px";<br> this.p.style.top = y "px";<br> },<br> setVisible: 함수(b) {<br> this.p.style.display = b ? "block": "없음";<br> }<br> }<br> var 불꽃놀이 = function() {<br> var fires = new Array();<br> 변수 개수 = 150;<br> var fl = 250;<br> var vpx = 500;<br> var vpy = 300;<br> var 중력 = .5;<br> var 바닥 = 200;<br> var 바운스 = -.8;<br> 변수 타이머;<br> var wind = ((Math.floor(Math.random()*3) 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;<br> var wpos = 0;<br> var wcount;<br> 반환 {<br> 초기화: 함수() {<br> wcount = 50 Math.floor(Math.random() * 100);<br> for (var i=0; i<count i></count> 변수 색상 = 0xFF0000;<br> color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];<br> while(color.length < 6) {<br /> 색상 = "0" 색상;<br /> }<br /> var fire = new Fire(12, 색상);<br /> fires.push(fire);<br /> fire.ypos = -100;<br /> fire.vz = Math.random() * 6 - 3;<br /> fire.vx = (Math.random()*2 - 1)*2 ;<br /> fire.vy = Math.random()*-15 - 15;<br /> fire.x = 500<br /> fire.y = 600;<br /> fire.append(document.body);<br /> }<br /> var that = this;<br /> 타이머 = setInterval(function() {<br /> wpos ;<br /> if (wpos >= wcount) {<br> wpos = 0;<br> wcount = 50 Math.floor(Math.random() * 100);<br> 바람 = ((Math.floor(Math.random()*3) 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;<br> }<br> for (var i=0;i<count; i ) {<br> that.move(fires[i]);<br> }<br> }, 30);<br> },<br> move: function(fire) {<br> fire.vy = 중력;<br> fire.x = fire.vx;<br> fire.y = fire.vy;<br> fire.vx = 바람;<br> fire.setPosition(fire.x, fire.y);<br> if (fire.x 1000 || fire.y 600) {<br> fire.vx = (Math.random()*2 - 1)*2;<br> fire.vy = Math.random()*-15 - 15;<br> fire.x = 500;<br> fire.y = 600;<br> fire.setPosition(fire.x, fire.y);<br> }<br> }<br> }<br> }<br> 불꽃놀이().init();<br> <br> </div>
