Sparticles实现雪花飞舞动画效果-html代码-BFW代码库

Sparticles实现雪花飞舞动画效果

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Obligatory Falling Snow ... but with Sparticles.js</title>

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Mountains+of+Christmas:400,700|Heebo:100,300,400,500,700,800,900'>
<style>
  * {
  box-sizing: border-box;
}

body, html {
  color: white;
  background: #1e2021;
  padding: 0;
  margin: 0;
  font-family: "Heebo", sans-serif;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(30, 32, 33, 0.2), rgba(30, 32, 33, 0.8)), url("http://repo.bfw.wiki/bfwrepo/image/5df0355083a46.png");
  background-size: cover;
  background-position: bottom center;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 30px;
  z-index: 1;
}

.stats {
  position: absolute;
  left: 10px;
  top: 0;
}

#app canvas {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

h1, p {
  text-align: center;
  margin: 0 auto;
  max-width: 400px;
}

h1 {
  font-size: 50px;
  font-weight: 100;
  font-family: "Mountains of Christmas", cursive;
  margin: 0 auto 15px;
}

.dg.ac {
  z-index: 2 !important;
}

.link {
  display: block;
  position: absolute;
  bottom: 20px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: white;
}
</style>

</head>
<body translate="no">
<main id=app>
<h1>
Obligatory Holiday Snow Falling
</h1>
<p>Using a new, lightweight, high-performance, canvas-based particle system soon to be available!</p>

</main>

<script src='http://repo.bfw.wiki/bfwrepo/js/sparticles.min.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js'></script>

<script>
  //
// I'm hotlinking to some SVG images from flaticon.com
// for use as the snowflakes. I hope that remains possible
// especially with the below attribution;
//
// ❄ Icons made by Freepik from www.flaticon.com
// ❄ https://www.flaticon.com/packs/snowflakes
//

let colorType = {
  type: "multi"
};

let colors = {
  color1: "rgba(255,255,255,1)",
  color2: "rgba(194,192,184,1)",
  color3: "rgba(232,248,255,1)",
  color4: "rgba(135,143,145,1)"
};

let options = {
  alphaSpeed: 10,
  alphaVariance: 1,
  color: [colors.color1, colors.color2, colors.color3, colors.color4],
  composition: "source-over",
  count: 350,
  direction: 161,
  float: 0.75,
  glow: 0,
  imageUrl: [
    "http://repo.bfw.wiki/bfwrepo/icon/5df0375c14720.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_32,h_32,/quality,q_90",

  ],
  maxAlpha: 2,
  maxSize: 22,
  minAlpha: -0.2,
  minSize: 4,
  parallax: 1.75,
  rotation: 0.5,
  shape: "image",
  speed: 3,
  style: "fill",
  twinkle: false,
  xVariance: 5,
  yVariance: 0,
};

window.onload = function() {

  initSparticles();
  initGui();
}

window.initSparticles = function() {
  var $main = document.querySelector("main");
  window.mySparticles = new sparticles.Sparticles($main,options);
};



window.initGui = function() {
  const s = window.mySparticles;
  const shapes = ["circle", "square", "triangle", "diamond", "line", "image"];
  const styles = ["fill", "stroke", "both"];
  const colorOptions = ["single", "multi", "rainbow"];
  const composites = [
    "source-over",
    "source-in",
    "source-out&quo.........完整代码请登录后点击上方下载按钮下载查看