Fireworks-JS 使用教程

最新推荐文章于 2024-09-13 22:18:41 发布

姬珊慧Beneficient

最新推荐文章于 2024-09-13 22:18:41 发布

阅读量659

点赞数 5

本文链接：https://blog.csdn.net/gitblog_01031/article/details/141152212

版权

Fireworks-JS 使用教程

fireworks-js🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.项目地址:https://gitcode.com/gh_mirrors/fi/fireworks-js

项目介绍

Fireworks-JS 是一个简单的烟花效果库，支持多种前端框架，如 React、Vue 3、Svelte、Angular、Preact、Solid 和 Web Components。该项目旨在提供零依赖、灵活配置、轻量级的烟花效果实现，支持 TypeScript 类型定义，并且兼容主流浏览器。

项目快速启动

安装

你可以通过 npm 安装 Fireworks-JS：

npm install fireworks-js

使用示例

以下是一个简单的使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fireworks Demo</title>
    <style>
        .fireworks-container {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="fireworks-container" id="fireworks"></div>
    <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
    <script>
        const container = document.querySelector('#fireworks');
        const fireworks = new Fireworks.default(container);
        fireworks.start();
    </script>
</body>
</html>