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: translate3.........完整代码请登录后点击上方下载按钮下载查看