js实现2024新年快乐烟花跟随鼠标点击绽放动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现2024新年快乐烟花跟随鼠标点击绽放动画效果代码

代码标签： js 2024 新年快乐烟花跟随鼠标点击绽放动画

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400");

body {
  margin: 0;
  margin-top: -20px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
  animation: fadeout 11s linear forwards;
}

.loading h2 {
  color: #000;
}

.loading .bar {
  position: relative;
  width: 400px;
  height: 40px;
  background: transparent;
  margin: 0 20px;
  border: 2px solid #000;
  box-sizing: border-box;
}

.loading .bar:after {
  content: "Loading...";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 20px;
  mix-blend-mode: difference;
}

.loading .bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: left;
  animation: animate 10s linear forwards;
}

.center {
  position: relative;
  width: 400px;
}

.center div {
  position: relative;
  margin: -30px 0;
  height: 100px;
  z-index: 2;
  transform: skewY(-5deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.center div:nth-child(2),
.center div:nth-child(4) {
  transform: skewY(14.5deg);
  z-index: 1;
}
.center div:nth-child(4) {
  transform: skewY(25deg);
  transform-origin: left;
  top: -52px;
}

.center div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.center div:nth-child(1):before,
.center div:nth-child(3):before {
  background: linear-gradient(-160deg, #ff0058, #673ab7);
  transform: scaleX(0);
}

.center div:nth-child(2):before,
.center div:nth-child(4):before {
  background: linear-gradient(-20deg, #ff0058, #673ab7);
  transform: scaleX(0);
}
.center div:nth-child(1):before {
  backface-visibility: hidden;
  animation: animate 1s linear forwards;
  transform-origin: right;
  animation-delay: 12s;
}

.center div:nth-child(2):before {
  backface-visibility: hidden;
  animation: animate 1s linear forwards;
  transform-origin: left;
  animation-delay: 13s;
}

.center div:nth-child(3):before {
  backface-visibility: hidden;
  animation: animate 1s linear forwards;
  transform-origin: right;
  animation-delay: 14s;
}

.center div:nth-child(4):before {
  backface-visibility: hidden;
  animation: animate 1s linear forwards;
  transform-origin: left;
  animation-delay: 15s;
  width: 60%;
  left: 0;
}

.center div:nth-child(1):after,
.center div:nth-child(3):after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(29, 0, 14, 0.1);
}

.center div h2 {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 10;
  opacity: 0;
  color: #fff;
}

.center div:nth-child(1) h2 {
  animation: fadeText 0.5s linear forwards;
  animation-delay: 13s;
  font-size: 40px;
}

.center div:nth-child(3) h2 {
  animation: fadeText 0.5s linear forwards;
  animation-delay: 15s;
  font-size: 90px;
  font-weight: bold;
}

@keyframes animate {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes fadeText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0%,
  91% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

body {
  background-color: black;
  text-align: center;

  color: white;
  font-size: 40px;
  font-weight: bold;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  color: white;
  font-size: 40px;
}
.watermark {
  position: absolute;
  bottom: 10px;
  display: flex;
  justify-content: center;
}
.watermark h1 {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 15px;
}
</style>


  
</head>

<body translate="no">
  


  <title>Happy New Year 2024</title>



  <main class="container">
    <section class="counter"></section>
  </main>
  <div class="watermark">
    <h1> <b style="color: #FF0058;">Youtube</b> | <b style="color: greenyellow;">AK Deep Knowlwdge</b> </h1>
  </div>
  <canvas id="canvas" width="1528" height="670"></canvas>
  <div class="loading">
    <h2>2023</h2>
    <div class="bar"></div>
    <h2>2024</h2>
  </div>
  <div class="center">
    <div>
      <h2>Happy New Year</h2>
    </div>
    <div></div>
    <div>
      <h2>2024</h2>
    </div>
    <div></div>
  </div>



  
      <script>

window.requestAnimFrame = function () {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    });

}();

// now we will setup our basic variables for the demo
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
// firework collection
fireworks = [],
// particle collection
particles = [],
// starting hue
hue = 120,
// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
limiterTotal = 5,
limiterTick = 0,
// this will time the auto launches of fireworks, one launch per 80 loop ticks
timerTotal = 75,
timerTick = 0,
mousedown = false,
// mouse x coordinate,
mx,
// mouse y coordinate
my;

// set canvas dimensions
canvas.width = cw;
canvas.height = ch;

// now we are going to setup our function placeholders for the entire demo

// get a random number within a range
function random(min, max) {
  return Math.random() * (max - min) + min;
}

// calculate the distance between two points
function calculateDistance(p1x, p1y, p2x, p2y) {
  var xDistance = p1x - p2x,
  yDistance = p1y - p2y;
  return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
}

// create firework
function Firework(sx, sy, tx, ty) {
  // actual coordinates
  this.x = sx;
  this.y = sy;
  // starting coordinates
  this.sx = sx;
  this.sy = sy;
  // target coordinates
  this.tx = tx;
  this.ty = ty;
  // distance from starting point to target
  this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
  this.distanceTraveled = 0;
  // track the past coordinates of each firework to create a trail effect, increase the coordinate count t.........完整代码请登录后点击上方下载按钮下载查看