HTML实现烟花，鼠标点击爆炸，免费提供源码，复制就可运行

02-27 阅读 0评论

最简单HTML烟花效果图

$HTML实现烟花，鼠标点击爆炸，免费提供源码，复制就可运行,HTML实现烟花，鼠标点击爆炸，免费提供源码，复制就可运行,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,复制,免费,鼠标,第2张$

（图片来源网络，侵删）

HTML实现代码展示


	
		
		CodePen - Happy New Year!
		
		
		
	
	
		
		Happy New Year!

CSS代码展示

@import url("https://fonts.googleapis.com/css?family=Caveat");
html, body {
  background: linear-gradient(to bottom, #090513 0%, #964987 75%, #fdbca3 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stars {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: rotation 360s infinite linear;
          animation: rotation 360s infinite linear;
}
.stars:after, .stars:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEVHcEz///+flKJDAAAAAXRSTlMAQObYZgAAAIVJREFUeAHt2SEOwkAQhtFJKuqKRRGOgKzgUMgKRI/G0ZDoacNkN/ue/zJ+/ugBcI+01/EEAGBc04FkP58AVFoi7VaSLAEAAPB/j0hbK678AADMkXbZG03mGA0AAKsP3JgAAGDa88knsuZ8Mp1M6gEAPFtNrtEjtkh7lyRb3/PAWpS0BPgC0PMMdOEjXqoAAAAASUVORK5CYII=");
}
.stars:after {
  background-size: 100px;
  opacity: 0.4;
}
.stars:before {
  background-size: 200px;
  opacity: 0.6;
}
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
h1 {
  font-size: calc(1.5em + 5vw);
  color: #fff;
  font-family: "Caveat", sans-serif;
  text-align: center;
  padding: 0.5em;
  transform: rotate(-4deg) translateY(-15vh);
}
.mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  min-width: 100%;
  height: 60px;
  fill: #000022;
}
.mountains--layer1 {
  z-index: 2;
}
.mountains--layer2 {
  fill: #9D5189;
  z-index: 0;
}

JavaScript代码展示

// Create the bursts
const B_CHILD = {
  fill: { '#ffffff': '#ef1cec' },
  delay: 'rand(300, 359)',
  duration: 700,
  pathScale: 'rand(0.8, 1)',
  isSwirl: true,
  swirlSize: 'stagger(-2,2)',
  swirlFrequency: 1 };
const B_OPTS = {
  count: 'rand(15,20)',
  top: '100%',
  children: {
    ...B_CHILD } };
const burst1 = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(150,170)' },
  x: -45,
  y: -335 });
const burst1_2 = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(150,170)' },
  x: -45,
  y: -335,
  children: {
    ...B_CHILD,
    delay: 'rand(260, 350)',
    pathScale: 'rand(0.7, 0.8)',
    degreeShift: 20 } });

const burst2 = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(100,150)' },
  x: 140,
  y: -315,
  children: {
    ...B_CHILD,
    fill: { '#ffffff': '#d8ff00' } } });
const burst2_2 = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(100,150)' },
  x: 140,
  y: -315,
  children: {
    ...B_CHILD,
    fill: { '#ffffff': '#d8ff00' },
    delay: 'rand(260, 350)',
    pathScale: 'rand(0.7, 0.8)',
    degreeShift: 20 } });
// Create interactive burst
const burst_tune = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(100,150)' },
  left: 0,
  top: 0,
  x: 0,
  y: 0,
  children: {
    ...B_CHILD,
    delay: 'rand(0, 50)',
    fill: { '#ffffff': '#d8ff00' } } });
const burst_tune_2 = new mojs.Burst({
  ...B_OPTS,
  radius: { 0: 'rand(100,150)' },
  left: 0,
  top: 0,
  children: {
    ...B_CHILD,
    fill: { '#ffffff': '#d8ff00' },
    delay: 'rand(10, 150)',
    pathScale: 'rand(0.7, 0.8)',
    degreeShift: 20 } });
document.addEventListener('click', function (e) {
  burst_tune.
  generate().
  tune({ x: e.pageX, y: e.pageY }).
  replay();
  burst_tune_2.
  generate().
  tune({ x: e.pageX, y: e.pageY }).
  replay();
});
// Create the firework lines
const FW_OPTS = {
  shape: 'curve',
  fill: 'none',
  isShowStart: false,
  strokeWidth: { 3: 0 },
  stroke: '#ffffff',
  strokeDasharray: '100%',
  strokeDashoffset: { '-100%': '100%' },
  duration: 1000 };
const fw1 = new mojs.Shape({
  ...FW_OPTS,
  radius: 170,
  radiusY: 20,
  top: '100%',
  y: -165,
  angle: 75,
  onStart: function () {
    burst1.replay(0);
    burst1_2.replay(0);
  } });
const fw2 = new mojs.Shape({
  ...FW_OPTS,
  radius: 180,
  radiusY: 50,
  top: '100%',
  x: 50,
  y: -155,
  strokeDashoffset: { '100%': '-100%' },
  angle: -60,
  delay: 200,
  onStart: function () {
    burst2.replay(0);
    burst2_2.replay(0);
  } });
// Underline under title
const underline = new mojs.Shape({
  parent: document.getElementById('title'),
  shape: 'curve',
  strokeLinecap: 'round',
  fill: 'none',
  isShowStart: false,
  strokeWidth: { '1em': '5em' },
  stroke: '#ffffff',
  strokeDasharray: '200%',
  strokeDashoffset: { '200%': '100%' },
  radius: 150,
  radiusY: 10,
  y: '1.1em',
  angle: -10,
  duration: 2000,
  delay: 1000 }).
then({
  strokeWidth: { '5em': '1em' },
  strokeDashoffset: { '100%': '-200%' },
  duration: 2000,
  delay: 10000 });
const timelineText = new mojs.Timeline({
  repeat: 2018 }).
add(underline).
play();
// Fire off the explosions
const timeline = new mojs.Timeline({
  repeat: 2018 }).
add([fw1, fw2]).
play();
// Create sounds
// var explosion = new Audio("https://www.freesound.org/data/previews/21/21410_21830-lq.mp3"); // buffers automatically when created
// explosion.play();