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