찾다

집  >  기사  >  웹 프론트엔드  >  CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)

CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)

青灯夜游
青灯夜游원래의
2018-11-06 17:49:355461검색

이 글에서는 js+css3의 Transforms 속성과 keyframes 속성을 통해 불꽃이 피어오르는 애니메이션 효과를 구현하는 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 효과를 살펴보겠습니다.

CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)

애니메이션 구현 원리:

애니메이션은 두 개의 키프레임을 사용합니다.

하나는 불꽃놀이 튜브의 상승 궤적이고 다른 하나는 불꽃놀이의 개화. 여기에서 진행 중인 기본 스케치를 볼 수 있습니다.

CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)

CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)

각 불꽃놀이 튜브에는 필드 하단의 선을 따라 무작위 시작 위치가 지정됩니다. 또한 표시된 영역 내에서 무작위 대상을 할당합니다. 폭죽 튜브가 대상 지점에 접근하면 보이지 않게 줄어듭니다(0x0픽셀).

이 시점에서 플레어가 보입니다. 이는 실제로 성냥개비처럼 바깥쪽 끝에 색상이 있는 방사형 방식으로 바깥쪽을 가리키는 일련의 DIV입니다. 폭발을 시뮬레이션하기 위해 단순히 길이를 추가하고 조명을 바깥쪽으로 이동했습니다.

JavaScript는 다음 용도로 사용됩니다.

1. 페이지(DOM)에 모든 필수 요소를 추가합니다.

2. 색상을 지정하고 각 조명을 추가합니다. 스팟이 올바른 위치로 회전합니다.

코드 예:


html 코드: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>烟花绽放</title>
		<link rel="stylesheet" type="text/css" href="css-fireworks.css">
	</head>
	<body>
		<div id="stage"><!-- 动画效果发生在这里 --></div>
		<script type="text/javascript" src="css-fireworks.js"></script>
	</body>
</html>

css 코드(css-fireworks.css)

@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

#stage {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 100px auto;
  background: #000 url(img/outerspace.jpg);
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: red;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

js 코드(css-fireworks.js)

document.addEventListener("DOMContentLoaded", function() {
  var num_launchers = 12;
  var num_flares = 20;
  var flare_colours = [&#39;red&#39;, &#39;aqua&#39;, &#39;violet&#39;, &#39;yellow&#39;, &#39;lightgreen&#39;, &#39;white&#39;, &#39;blue&#39;];
  var cssIdx = document.styleSheets.length - 1;

  function myRandom(from, to)
  {
    return from + Math.floor(Math.random() * (to-from));
  }

  var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
      + "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
      + " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

  for(var i=0; i < num_launchers; i++) {
    leftfrom = myRandom(15, 85);
    lefttop = myRandom(30, 70);
    toptop = myRandom(20, 200);
    leftend = lefttop + (lefttop-leftfrom)/2;
    botbot = toptop + 100;

    csscode = keyframes_template;
    csscode = csscode.replace(/LEFTFROM/, leftfrom);
    csscode = csscode.replace(/LEFTTOP/, lefttop);
    csscode = csscode.replace(/TOPTOP/, toptop);
    csscode = csscode.replace(/LEFTEND/, leftend);
    csscode = csscode.replace(/BOTBOT/, botbot);

    try { // WebKit browsers
      csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }

    try { // Mozilla browsers
      csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
      document.styleSheets[cssIdx].insertRule(csscode2, 0);
    } catch(e) { }
  }

  for(var i=0; i < num_launchers; i++) {
    var rand = myRandom(0, flare_colours.length - 1);
    var rand_colour = flare_colours[rand];
    var launch_delay = myRandom(0,100) / 10;

    csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
      + "  -webkit-animation-name: flight_" + i + ";\n"
      + "  -webkit-animation-delay: " + launch_delay + "s;\n"
      + "  -moz-animation-name: flight_" + i + ";\n"
      + "  -moz-animation-delay: " + launch_delay + "s;\n"
      + "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);

    csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
      + "  border-color: " + rand_colour + ";\n"
      + "  -webkit-animation-delay: " + launch_delay + "s;\n"
      + "  -moz-animation-delay: " + launch_delay + "s;\n"
      + "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);
  }

  for(var i=0; i < num_flares; i++) {
    csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
	+ "  -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
	+ "  -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
	+ "}";
    document.styleSheets[cssIdx].insertRule(csscode, 0);
  }

  for(var i=0; i < num_launchers; i++) {
    var newdiv = document.createElement("div");
    newdiv.className = "launcher";
    for(var j=0; j < num_flares; j++) {
      newdiv.appendChild(document.createElement("div"));
    }
    document.getElementById("stage").appendChild(newdiv);
  }
}, false);

요약: 위는 이 기사 이해를 깊게하기 위해 모든 콘텐츠를 직접 시험해 볼 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 동영상 학습을 추천합니다:

css3 tutorial

!

위 내용은 CSS3+js는 불꽃놀이가 피는 애니메이션 효과를 구현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS를 사용하여 진행률 추적 표시줄을 구현하는 방법은 무엇입니까? (코드 예)다음 기사：CSS를 사용하여 진행률 추적 표시줄을 구현하는 방법은 무엇입니까? (코드 예)

관련 기사

더보기