jquery实现农村里树木下烟花绽放动画效果代码-html代码-BFW代码库

jquery实现农村里树木下烟花绽放动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现农村里树木下烟花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #101010;
}
.container{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}
canvas{
    position: absolute;
    top: 0;
    left: 0;
}
</style>




</head>

<body >
  <div id="jsi-fireworks-container" class="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script>
var RENDERER = {
  LEAF_INTERVAL_RANGE: { min: 100, max: 200 },
  FIREWORK_INTERVAL_RANGE: { min: 20, max: 200 },
  SKY_COLOR: 'hsla(210, 60%, %luminance%, 0.2)',
  STAR_COUNT: 100,

  init: function () {
    this.setParameters();
    this.reconstructMethod();
    this.createTwigs();
    this.createStars();
    this.render();
  },
  setParameters: function () {
    this.$container = $('#jsi-fireworks-container');
    this.width = this.$container.width();
    this.height = this.$container.height();
    this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
    this.contextFireworks = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');
    this.contextTwigs = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');

    this.twigs = [];
    this.leaves = [new LEAF(this.width, this.height, this)];
    this.stars = [];
    this.fireworks = [new FIREWORK(this.width, this.height, this)];

    this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
    this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
    this.fireworkInterval = this.maxFireworkInterval;
  },
  reconstructMethod: function () {
    this.render = this.render.bind(this);
  },
  getRandomValue: functio.........完整代码请登录后点击上方下载按钮下载查看