HTML5+CSS3+JS小实例：五彩纸屑礼花筒

制作不易安利给大家前端实用的小实例 cv可直接运行使用

效果图：

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩纸屑礼花筒</title>
    <link rel="stylesheet" href="208.css">
</head>
<body>
    <img src="/images/lihuatong.png" alt="" class="lihuatong">
</body>
</html>

<script src="208.js" type="module"></script>

js：

// 引入插件
import { confetti } from 'https://cdn.jsdelivr.net/npm/tsparticles-confetti/+esm';

// 要操作的元素
const lihuatong=document.querySelector('.lihuatong');

// 喷出五彩纸屑
const run=()=>{
    confetti({
        particleCount:100, //粒子数量
        spread:70, //扩散范围
        origin:{ //喷出的位置
            x:0.5,
            y:0.65
        }
    })
}

// 礼花筒绑定点击事件
lihuatong.addEventListener('click',run);

css：

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #000;
    /* 禁止选取 */
    user-select: none;
}
.lihuatong{
    width: 60px;
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translateX(-50%);
    cursor: pointer;
}

图片素材：