免费建个超市网站,用仿站工具做网站,网站备案问题,wordpress淘宝样式按钮Hello#xff0c;大家好#xff0c;今天我挑战的组件是这样的#xff01; 今天这个组件是一个打卡成功#xff0c;或者获得徽章后的组件。点击按钮后#xff0c;会弹出礼花。项目中的勋章是我通过AI生成的#xff0c;还是很厉害的哈#xff01;稍微抠图直接使用。最后面… 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.MouseEventHTMLButtonElement) {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 classNamesuccess-carddiv classNamesuccess-medalimg src{medalPNG} altsuccess-medal //divdiv classNamesuccess-messageh1Congratulations/h1pYou did a great job in the test!/p/divdiv classNamesuccess-buttonbutton 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. **用途和氛围**- 奖励图标- 庆祝氛围
