最简单HTML烟花效果图

HTML实现代码展示

	
		
		
		
		
		

	
	
		
		
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();

结论

所有代码拷贝后即可运行，如果有问题的可以联系作者！