南京网站制作学校百度seo教程视频
Hello，大家好，今天我挑战的组件是这样的！
今天这个组件是一个打卡成功，或者获得徽章后的组件。点击按钮后，会弹出礼花。项目中的勋章是我通过AI生成的，还是很厉害的哈！稍微抠图直接使用。最后面，我也会展示我的提示词，大家可以去试一试。
欢迎大家把项目拉下来使用哦！
项目地址： https://github.com/hismeyy/react-component-100
今天还是用到了canvas-confetti。它是一个可以喷射礼花的一个库，GitHub地址我放在了下方，地址中有它的使用教程呢！
canvas-confetti
如果大家有什么询问的，或者推荐做的组件，可以评论区，评论哦！
下面是代码展示
代码展示
SuccessCard.tsx
import confetti from "canvas-confetti";
import "./SuccessCard.css";
import medalPNG from "./medal.png";const SuccessCard = () => {// 触发烟花效果的函数const triggerConfetti = (event: React.MouseEvent<HTMLButtonElement>) => {const button = event.currentTarget;const rect = button.getBoundingClientRect();const x = (rect.left + rect.width / 2) / window.innerWidth;const y = rect.top / window.innerHeight;confetti({particleCount: 200, angle: 90, spread: 90, origin: { x, y }, scalar: 1.5, });};return (<div className="success-card"><div className="success-medal"><img src={medalPNG} alt="success-medal" /></div><div className="success-message"><h1>Congratulations</h1><p>You did a great job in the test!</p></div><div className="success-button"><button onClick={triggerConfetti}>Continue</button></div></div>);
};export default SuccessCard;SuccessCard.css
.success-card {width: 450px;height: 500px;display: flex;align-items: center;background-color: #F5F5F5;border-radius: 10px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);flex-direction: column
}.success-card .success-medal {margin-top: 10px;width: 300px;height: 300px;overflow: hidden;
}.success-card .success-medal img {width: 100%;height: 100%;object-fit: cover;
}.success-card .success-message {margin-top: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;margin-top: 10px;
}.success-card .success-message h1 {all: unset;font-size: 36px;font-weight: bold;
}.success-card .success-message p {all: unset;margin-top: 15px;font-size: 16px;color: #7c7c7c;
}.success-card .success-button {margin-top: 20px;display: flex;justify-content: center;align-items: center;
}.success-card .success-button button {all: unset;padding: 15px 30px;border-radius: 25px;background-color: #5246CF;color: #fff;cursor: pointer;
}.success-card .success-button button:hover {background-color: #3f34b9;
}
使用
App.tsx
import './App.css'
import SuccessCard from './components/card/successCard01/SuccessCard';function App() {return (<SuccessCard />);
}export default App;
提示词
用于生成徽章，大家可以修改提示词，得到自己想要的一组徽章
这是一枚设计简洁的奖章图标，主体是黄色的八角形，中间有一颗白色的五角星，奖章下方有两条蓝色的飘带。
1. **设计风格**- 简洁设计- 卡通风格- 扁平设计
2. **形状和颜色**- 黄色八角形- 白色五角星- 蓝色飘带
3. **背景元素**- 纯色
4. **用途和氛围**- 奖励图标- 庆祝氛围