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