@tsparticles/fireworks 烟花特效
html版
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<link
rel="shortcut icon"
href="https://particles.js.org/tsParticles-64.png"
/>
<meta
name="description"
content="tsParticles - Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."
/>
<meta name="author" content="Matteo Bruni" />
<meta
name="keywords"
content="html css javascript typescript particles js ts jsx tsx canvas confetti fireworks animations react vue angular svelte libraries how to create add"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@HollowMatt_ITA" />
<meta
name="twitter:image:src"
content="https://particles.js.org/images/demo2.png"
/>
<meta
property="og:title"
content="tsParticles - JavaScript Particles, Confetti and Fireworks animations for your website"
/>
<meta property="og:site_name" content="tsParticles" />
<meta property="og:url" content="https://particles.js.org/" />
<meta
property="og:description"
content="Easily create highly customizable particles, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno."
/>
<meta
property="og:image"
content="https://particles.js.org/images/demo2.png"
/>
<title>
tsParticles | Fireworks Preset | JavaScript Particles, Confetti and
Fireworks animations for your website
</title>
<link rel="stylesheet" href="fire1_files/presets.min.css" />
<style>
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
sans-serif;
}
#carbonads {
display: flex;
max-width: 330px;
background-color: hsl(0, 0%, 98%);
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
z-index: 100;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
#carbonads .carbon-img img {
display: block;
}
#carbonads .carbon-text {
font-size: 13px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.5;
text-align: left;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
background: #f1f1f2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="fire1_files/clarity.js"></script>
<script async="" src="fire1_files/8q4bxin4tm.js"></script>
<script async="" src="fire1_files/js"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'G-922Z47NPS0')
</script>
<meta
http-equiv="origin-trial"
content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"
/>
</head>
<body>
<div id="tsparticles">
<canvas
data-generated="true"
style="
width: 100% !important;
height: 100% !important;
position: fixed !important;
z-index: 0 !important;
top: 0px !important;
left: 0px !important;
background-color: rgb(0, 0, 0);
pointer-events: none;
"
aria-hidden="true"
width="3840"
height="1918"
></canvas
><img
style="
user-select: none;
position: absolute;
top: 20px;
left: 2424px;
display: block;
z-index: 2;
"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOS43MDcsNS4yOTNjLTAuMzkxLTAuMzkxLTEuMDIzLTAuMzkxLTEuNDE0LDBsLTEuNTUxLDEuNTUxYy0wLjM0NS0wLjY4OC0wLjk4Ny0xLjAyLTEuNjA0LTEuMDJjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEwLjM1Nyw4LjU2MSw4LjkwNCw5LDgsOWMtMS42NTQsMC0zLDEuMzQ2LTMsM3YyYzAsMS4yMzcsMC43NTQsMi4zMDIsMS44MjYsMi43NmwtMS41MzMsMS41MzNjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTRDNS40ODgsMTkuOTAyLDUuNzQ0LDIwLDYsMjBzMC41MTItMC4wOTgsMC43MDctMC4yOTNsMi41MjctMi41MjdjMC42OTcsMC4xNzQsMS40MTYsMC40NTUsMS44NzUsMC43NjJsMi42NzIsMS43ODFjMC40NTEsMC4zMDEsMC45MDcsMC40NTMsMS4zNTYsMC40NTNDMTYuMDM1LDIwLjE3NiwxNywxOS40OTUsMTcsMThWOS40MTRsMi43MDctMi43MDdDMjAuMDk4LDYuMzE2LDIwLjA5OCw1LjY4NCwxOS43MDcsNS4yOTN6IE0xNC44OTEsNy45NDFjMC4wMzgtMC4wMjUsMC4wNzMtMC4wNDYsMC4xMDQtMC4wNjJDMTQuOTk4LDcuOTE0LDE1LDcuOTU0LDE1LDh2MS4yOTNsLTIsMlY5LjIwMkwxNC44OTEsNy45NDF6IE03LDEyYzAtMC41NTIsMC40NDgtMSwxLTFjMS4yMTEsMCwyLjkwNy0wLjQ5NSw0LTEuMTQ2djIuNDM5bC0yLjgzLDIuODNDOC43NTcsMTUuMDQ2LDguMzU2LDE1LDgsMTVjLTAuNTUyLDAtMS0wLjQ0OC0xLTFWMTJ6IE0xMC4zMDEsMTUuNDA2TDEyLDEzLjcwN3YyLjQzOUMxMS41MTksMTUuODU5LDEwLjkyNSwxNS42MDQsMTAuMzAxLDE1LjQwNnogTTE0Ljk5NCwxOC4xMmMtMC4wMy0wLjAxNi0wLjA2NS0wLjAzNi0wLjEwNC0wLjA2MkwxMywxNi43OTh2LTQuMDkxbDItMlYxOEMxNSwxOC4wNDYsMTQuOTk4LDE4LjA4NiwxNC45OTQsMTguMTJ6Ii8+CiAgICA8L2c+Cjwvc3ZnPg=="
/><img
style="
user-select: none;
position: absolute;
top: 20px;
left: 2424px;
display: none;
z-index: 2;
"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNy4xMzgsNS44MjRjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEyLjM1Nyw4LjU2MSwxMC45MDQsOSwxMCw5Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjJjMCwxLjY1NCwxLjM0NiwzLDMsM2MwLjkwNCwwLDIuMzU3LDAuNDM5LDMuMTA5LDAuOTQxbDIuNjcyLDEuNzgxYzAuNDUxLDAuMzAxLDAuOTA3LDAuNDUzLDEuMzU2LDAuNDUzQzE4LjAzNSwyMC4xNzYsMTksMTkuNDk1LDE5LDE4VjhDMTksNi41MDUsMTguMDM1LDUuODI0LDE3LjEzOCw1LjgyNHogTTE0LDE2LjE0NkMxMi45MDcsMTUuNDk1LDExLjIxMSwxNSwxMCwxNWMtMC41NTIsMC0xLTAuNDQ4LTEtMXYtMmMwLTAuNTUyLDAuNDQ4LTEsMS0xYzEuMjExLDAsMi45MDctMC40OTUsNC0xLjE0NlYxNi4xNDZ6IE0xNywxOGMwLDAuMDQ2LTAuMDAyLDAuMDg2LTAuMDA2LDAuMTJjLTAuMDMtMC4wMTYtMC4wNjUtMC4wMzYtMC4xMDQtMC4wNjJMMTUsMTYuNzk4VjkuMjAybDEuODkxLTEuMjYxYzAuMDM4LTAuMDI1LDAuMDczLTAuMDQ2LDAuMTA0LTAuMDYyQzE2Ljk5OCw3LjkxNCwxNyw3Ljk1NCwxNyw4VjE4eiIvPgogICAgPC9nPgo8L3N2Zz4="
/><img
style="
user-select: none;
position: absolute;
top: 20px;
left: 2458px;
display: block;
z-index: 2;
"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNS4xMzgsNS44MjRjLTAuNDQ5LDAtMC45MDUsMC4xNTItMS4zNTYsMC40NTNsLTIuNjcyLDEuNzgxQzEwLjM1Nyw4LjU2MSw4LjkwNCw5LDgsOWMtMS42NTQsMC0zLDEuMzQ2LTMsM3YyYzAsMS42NTQsMS4zNDYsMywzLDNjMC45MDQsMCwyLjM1NywwLjQzOSwzLjEwOSwwLjk0MWwyLjY3MiwxLjc4MWMwLjQ1MSwwLjMwMSwwLjkwNywwLjQ1MywxLjM1NiwwLjQ1M0MxNi4wMzUsMjAuMTc2LDE3LDE5LjQ5NSwxNywxOFY4QzE3LDYuNTA1LDE2LjAzNSw1LjgyNCwxNS4xMzgsNS44MjR6IE04LDE1Yy0wLjU1MiwwLTEtMC40NDgtMS0xdi0yYzAtMC41NTIsMC40NDgtMSwxLTFjMS4yMTEsMCwyLjkwNy0wLjQ5NSw0LTEuMTQ2djYuMjkzQzEwLjkwNywxNS40OTUsOS4yMTEsMTUsOCwxNXogTTE1LDE4YzAsMC4wNDYtMC4wMDIsMC4wODYtMC4wMDYsMC4xMmMtMC4wMy0wLjAxNi0wLjA2NS0wLjAzNi0wLjEwNC0wLjA2MkwxMywxNi43OThWOS4yMDJsMS44OTEtMS4yNjFjMC4wMzgtMC4wMjUsMC4wNzMtMC4wNDYsMC4xMDQtMC4wNjJDMTQuOTk4LDcuOTE0LDE1LDcuOTU0LDE1LDhWMTh6Ii8+CiAgICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4LjI5MiwxMC4yOTRjLTAuMzksMC4zOTEtMC4zOSwxLjAyMywwLjAwMiwxLjQxNGMwLjM0NSwwLjM0NSwwLjUzNSwwLjgwMywwLjUzNSwxLjI5MWMwLDAuNDg5LTAuMTksMC45NDgtMC41MzYsMS4yOTRjLTAuMzkxLDAuMzktMC4zOTEsMS4wMjMsMCwxLjQxNEMxOC40ODgsMTUuOTAyLDE4Ljc0NCwxNiwxOSwxNnMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MwLjcyNC0wLjcyMywxLjEyMi0xLjY4NSwxLjEyMi0yLjcwOHMtMC4zOTgtMS45ODQtMS4xMjMtMi43MDdDMTkuMzE3LDkuOTAzLDE4LjY4Myw5LjkwMSwxOC4yOTIsMTAuMjk0eiIvPgogICAgPC9nPgo8L3N2Zz4="
/><img
style="
user-select: none;
position: absolute;
top: 20px;
left: 2492px;
display: block;
z-index: 2;
"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgdmVyc2lvbj0iMS4yIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IkxheWVyXzEiPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNi43MDYsMTAuMjkyYy0wLjM4OS0wLjM4OS0xLjAyMy0wLjM5MS0xLjQxNCwwLjAwMmMtMC4zOSwwLjM5MS0wLjM5LDEuMDIzLDAuMDAyLDEuNDE0YzAuMzQ1LDAuMzQ1LDAuNTM1LDAuODAzLDAuNTM1LDEuMjkxYzAsMC40ODktMC4xOSwwLjk0OC0wLjUzNiwxLjI5NGMtMC4zOTEsMC4zOS0wLjM5MSwxLjAyMywwLDEuNDE0QzE1LjQ4OCwxNS45MDIsMTUuNzQ0LDE2LDE2LDE2czAuNTEyLTAuMDk4LDAuNzA3LTAuMjkzYzAuNzI0LTAuNzIzLDEuMTIyLTEuNjg1LDEuMTIyLTIuNzA4UzE3LjQzMSwxMS4wMTUsMTYuNzA2LDEwLjI5MnoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguNzA2LDguMjkyYy0wLjM5MS0wLjM4OS0xLjAyMy0wLjM5LTEuNDE0LDAuMDAyYy0wLjM5LDAuMzkxLTAuMzksMS4wMjQsMC4wMDIsMS40MTRjMC44NzksMC44NzcsMS4zNjMsMi4wNDQsMS4zNjQsMy4yODdjMC4wMDEsMS4yNDYtMC40ODQsMi40MTctMS4zNjUsMy4yOThjLTAuMzkxLDAuMzkxLTAuMzkxLDEuMDIzLDAsMS40MTRDMTcuNDg4LDE3LjkwMiwxNy43NDQsMTgsMTgsMThzMC41MTItMC4wOTgsMC43MDctMC4yOTNjMS4yNTktMS4yNTksMS45NTItMi45MzMsMS45NTEtNC43MTNDMjAuNjU3LDExLjIxNywxOS45NjQsOS41NDcsMTguNzA2LDguMjkyeiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMC43MDYsNi4yOTJjLTAuMzkxLTAuMzg5LTEuMDIzLTAuMzktMS40MTQsMC4wMDJjLTAuMzksMC4zOTEtMC4zOSwxLjAyNCwwLjAwMiwxLjQxNGMxLjQxMiwxLjQwOSwyLjE5MSwzLjI4NSwyLjE5Miw1LjI4NGMwLjAwMiwyLjAwMi0wLjc3NywzLjg4NS0yLjE5Myw1LjMwMWMtMC4zOTEsMC4zOTEtMC4zOTEsMS4wMjMsMCwxLjQxNEMxOS40ODgsMTkuOTAyLDE5Ljc0NCwyMCwyMCwyMHMwLjUxMi0wLjA5OCwwLjcwNy0wLjI5M2MxLjc5NC0xLjc5NCwyLjc4MS00LjE4LDIuNzc5LTYuNzE3QzIzLjQ4NSwxMC40NTcsMjIuNDk3LDguMDc4LDIwLjcwNiw2LjI5MnoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTIuMTM4LDUuODI0Yy0wLjQ0OSwwLTAuOTA1LDAuMTUyLTEuMzU2LDAuNDUzTDguMTA5LDguMDU5QzcuMzU3LDguNTYxLDUuOTA0LDksNSw5Yy0xLjY1NCwwLTMsMS4zNDYtMywzdjJjMCwxLjY1NCwxLjM0NiwzLDMsM2MwLjkwNCwwLDIuMzU3LDAuNDM5LDMuMTA5LDAuOTQxbDIuNjcyLDEuNzgxYzAuNDUxLDAuMzAxLDAuOTA3LDAuNDUzLDEuMzU2LDAuNDUzQzEzLjAzNSwyMC4xNzYsMTQsMTkuNDk1LDE0LDE4VjhDMTQsNi41MDUsMTMuMDM1LDUuODI0LDEyLjEzOCw1LjgyNHogTTUsMTVjLTAuNTUyLDAtMS0wLjQ0OC0xLTF2LTJjMC0wLjU1MiwwLjQ0OC0xLDEtMWMxLjIxMSwwLDIuOTA3LTAuNDk1LDQtMS4xNDZ2Ni4yOTNDNy45MDcsMTUuNDk1LDYuMjExLDE1LDUsMTV6IE0xMiwxOGMwLDAuMDQ2LTAuMDAyLDAuMDg2LTAuMDA2LDAuMTJjLTAuMDMtMC4wMTYtMC4wNjUtMC4wMzYtMC4xMDQtMC4wNjJMMTAsMTYuNzk4VjkuMjAybDEuODkxLTEuMjYxYzAuMDM4LTAuMDI1LDAuMDczLTAuMDQ2LDAuMTA0LTAuMDYyQzExLjk5OCw3LjkxNCwxMiw3Ljk1NCwxMiw4VjE4eiIvPgogICAgPC9nPgo8L3N2Zz4="
/>
</div>
<script type="text/javascript">
;(function (c, l, a, r, i, t, y) {
c[a] =
c[a] ||
function () {
;(c[a].q = c[a].q || []).push(arguments)
}
t = l.createElement(r)
t.async = 1
t.src = 'https://www.clarity.ms/tag/' + i
y = l.getElementsByTagName(r)[0]
y.parentNode.insertBefore(t, y)
})(window, document, 'clarity', 'script', '8q4bxin4tm')
</script>
<script
async=""
defer="defer"
type="text/javascript"
src="fire1_files/carbon.js"
id="_carbonads_js"
></script>
<div id="carbonads">
<span>
<span class="carbon-wrap">
<a
href="https://srv.carbonads.net/ads/click/x/GTND427JCVBDVK7LCV74YKQUC67DLKJJCYYDPZ3JCAYI6537CWSI52JKCEADEK7UCKBIT23EFTSDK5QJCAYD62JKC6SI4KJIF6BDTK3EHJNCLSIZ"
class="carbon-img"
target="_blank"
rel="noopener sponsored"
>
<img
src="fire1_files/030b1e0468f5e27497d97bbbd2e24fbfa607e581.jpg"
alt="ads via Carbon"
border="0"
height="100"
width="130"
data-no-statview="no"
style="max-width: 130px"
/>
</a>
<a
href="https://srv.carbonads.net/ads/click/x/GTND427JCVBDVK7LCV74YKQUC67DLKJJCYYDPZ3JCAYI6537CWSI52JKCEADEK7UCKBIT23EFTSDK5QJCAYD62JKC6SI4KJIF6BDTK3EHJNCLSIZ"
class="carbon-text"
target="_blank"
rel="noopener sponsored"
>
Work smarter, not harder. Effectively run workloads and builds with
Kubes.
</a>
</span>
<a
href="http://carbonads.net/?utm_source=particlesjsorg&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon"
class="carbon-poweredby"
target="_blank"
rel="noopener sponsored"
>ads via Carbon</a
>
</span>
</div>
<script src="fire1_files/tsparticles.preset.fireworks.bundle.min.js"></script>
<script type="text/javascript">
;(async () => {
await tsParticles.load({
id: 'tsparticles',
options: { preset: 'fireworks' },
})
})()
</script>
</body>
</html>
React版
import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
// import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
// import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
import { loadFireworksPreset } from "@tsparticles/preset-fireworks"
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
const App = () => {
const [init, setInit] = useState(false);
// this should be run only once per application lifetime
useEffect(() => {
initParticlesEngine(async (engine) => {
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadAll(engine);
//await loadFull(engine);
//await loadSlim(engine);
await loadFireworksPreset(engine)
//await loadBasic(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
const options = useMemo(
() => ({
preset: "fireworks",
// background: {
// color: {
// value: "#fff",
// },
// },
// fpsLimit: 120,
// interactivity: {
// events: {
// onClick: {
// enable: true,
// mode: "push",
// },
// onHover: {
// enable: true,
// mode: "repulse",
// },
// },
// modes: {
// push: {
// quantity: 4,
// },
// repulse: {
// distance: 200,
// duration: 0.4,
// },
// },
// },
// particles: {
// color: {
// value: "#ffffff",
// },
// links: {
// color: "#ffffff",
// distance: 150,
// enable: true,
// opacity: 0.5,
// width: 1,
// },
// move: {
// direction: "none",
// enable: true,
// outModes: {
// default: "bounce",
// },
// random: false,
// speed: 6,
// straight: false,
// },
// number: {
// density: {
// enable: true,
// },
// value: 80,
// },
// opacity: {
// value: 0.5,
// },
// shape: {
// type: "circle",
// },
// size: {
// value: { min: 1, max: 5 },
// },
// },
// detectRetina: true,
}),
[],
);
if (init) {
return (
<Particles
id="tsparticles"
particlesLoaded={particlesLoaded}
options={options}
/>
);
}
return <></>;
};
export default App在线效果
https://particles.js.org/samples/presets/fireworks
人工智能学习网站
参考链接：
