本文通过 CSS 和一个开源包来实现五彩纸屑按钮效果。
1.创建页面框架利用 html:5 和 div.wrapper>button.btn-confetti 快速创建页脸庞器。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="wrapper"> <button class="btn-confetti"></button> </div></body></html>2.增加根本样式
增加对 body 元素的 grid 布局，同时给它设置了高度 100vh，使子元素水平垂直居中。给 button 按钮增加了渐变背景色，并利用了 transition 动画。把稳样式中利用了原生 CSS 嵌套语法。
body { display: grid; place-items: center; height: 100vh;}.wrapper { position: relative; .btn-confetti { font-size: 1.15rem; font-weight: 700; padding: 0.75em 1.5em; border: 0; border-radius: 100vmax; background: linear-gradient(90deg, #a8ff78 50%, #78ffd6); cursor: pointer; transition: transform 150ms ease-in-out; &:hover { transform: scale(1.1); } }}3.实现五彩纸屑
五彩纸屑利用了一个开源的 NPM 包 canvas-confetti，你可以通过 npm i canvas-confetti 快速安装利用，在本 demo 中直策应用的是 CDN 链接。
我们首先给按钮绑定一个点击事宜，当按钮被点击时触发五彩纸屑的喷发的效果。
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script><script>const $confettiBtn = document.querySelector('.btn-confetti');$confettiBtn.addEventListener('click', () => { const $canvas = document.createElement('canvas'); const $wrapper = document.querySelector('.wrapper'); $canvas.width = 600; $canvas.height = 600; $wrapper.appendChild($canvas); // 初始化 confetti const confettiBtn = window.confetti.create($canvas); // 喷发后 confettiBtn().then(() => $canvas.remove());});</script>4.效果预览
