canva实现粒子枪点击拖拽喷射效果代码-html代码-BFW代码库

canva实现粒子枪点击拖拽喷射效果代码

代码语言：html

所属分类：粒子

代码描述：canva实现粒子枪点击拖拽喷射效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
.confetti-container {
	perspective: 700px;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/*
	user-select: none;
	pointer-events: none;
	*/
	background: #edb;
}
.confetti {
	position: absolute;
	--confetti-color: blue;
	transform-origin: top left;
}
.confetti::before {
	content: "";
	display: block;
	height: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--confetti-color);
	transform-origin: center;
}
@keyframes confetti-slow {
	0% { margin-top: 0; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(1, 1); opacity: 1; }
	100% { margin-top: 105%; transform: translate3d(0, 0, 0) rotateX(360deg) rotateY(180deg) scale(1.4, 1.4); opacity: 0; }
}
@keyframes confetti-medium {
	0% { margin-top: 0; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(1, 1); opacity: 1; }
	100% { margin-top: 105%; transform: translate3d(0, 0, 0) rotateX(100deg) rotateY(360deg) scale(1.2, 1.2); opacity: 0; }
}
@keyframes confetti-fast {
	0% { margin-top: 0; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) scale(0.8, 0.8); opacity: 1; }
	100% { margin-top: 105%; transform: translate3d(0, 0, 0) rotateX(10deg) rotateY(250deg) scale(1.2, 1.2); opacity: 0; }
}
@keyframes confetti-medium2 {
	0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
	100% { transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); }
}
@keyframes confetti-fast2 {
	0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
	100% { transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); }
}
.confetti--animation-slow::before { animation: confetti-slow 2.25s ease-out 1 forwards; }
.confetti--animation-medium::before { animation: confetti-medium 1.75s ease-out 1 forwards; }
.confetti--animation-fast::before { animation: confetti-fast 1.25s ease-out 1 forwards; }
</style>



</head>

<body>
  <div class="confetti-container"></div>
<div style="position: absolute; top: 0; z-index: 100;">Click and drag to blast confetti!</div>

  
      <script >
console.clear();

const EffectConfetti = (() => {
  function EffectConfetti(config) {
    this.config = Object.assign({}, C.DefaultConfig, config);
  }
  const C = EffectConfetti,P = Object.assign(C.prototype, { constructor: C });
  C.DefaultConfig = {
    colors: ['#EF2964', '#00C09D', '#2D87B0', '#48485E', '#EFFF1D'],
    anims: ['slow', 'medium', 'fast'],
    size: 10,
    interval: 16, timeout: 3000,
    posJitter: 0, angJitter: 0, distJitter: 0, sizeJitter: 0 };

  C.getJitter = jitter => Math.round((Math.random() - 0.5) * jitter);
  C.getAngDist = ([x0, y0], [x1, y1]) => {
    let dx = x0 - x1,dy = y0 - y1;
    return [
    Math.atan2(dy, dx) * 180 / Math.PI + 90,
    Math.round(Math.sqrt(dx * dx + dy * dy))];

  };
  P.fireConfetti = function (from, to) {
    con.........完整代码请登录后点击上方下载按钮下载查看