tsparticles实现烟花绽放粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:tsparticles实现烟花绽放粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* ---- reset ---- */ body { margin: 0; font: normal 75% Arial, Helvetica, sans-serif; } canvas { display: block; vertical-align: bottom; } /* ---- tsparticles container ---- */ .github { bottom: 10px; right: 10px; position: fixed; border-radius: 10px; background: #fff; padding: 0 12px 6px 12px; border: 1px solid #000; } .github a:hover, .github a:link, .github a:visited, .github a:active { color: #000; text-decoration: none; } .github img { height: 30px; } .github #gh-project { font-size: 20px; padding-left: 5px; font-weight: bold; vertical-align: bottom; } </style> </head> <body> <div id="tsparticles"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tsparticles.1.29.js"></script> <script > //tsParticles library - https://github.com/matteobruni/tsparticles tsParticles.load("tsparticles", { fullScreen: { enable: true }, detectRetina: true, background: { color: "#000" }, fpsLimit: 60, emitters: { direction: "top", life: { count: 0, duration: 0.1, delay: 0.1 }, rate: { delay: 0.15, quantity: 1 }, size: { width: 100, height: 00 }, position: { y: 100, x: 50 } }, particles: { number: { value: 0 }, destroy: { mode: "split", split: { count: 1, factor: { value: 1 / 3 }, rate: { value: 100 }, particles: { stroke: { color: { value: ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"] .........完整代码请登录后点击上方下载按钮下载查看
网友评论0