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