本文通过 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>
本文暂时没有评论，来添加一个吧(●'◡'●)