vue.js+vite搭建一个简单的新春祈福活动网站

vue.js+vite搭建一个简单的新春祈福活动网站！使用canvas技术，绘制视觉特效。

功能有：燃放烟花，和撞钟祈福。祈福撞钟我设计了是按钮事件，播放一个mp4动画，配上播放一段撞钟的生效文件mp3.

<template><NavBar /><div class="bell-container"><!-- 撞钟按钮 --><button @click="ringBell" class="bell-button" :disabled="isButtonDisabled">撞钟</button><!-- 视频元素：页面加载时显示 --><video ref="bellVideo" style="width: 300px; height: 300px;" preload="auto" autoplay><source :src="bellVideo" type="video/mp4" />您的浏览器不支持视频播放。</video><!-- 显示消息 --><p v-if="message" class="message">{{ message }}</p><!-- 欢迎标语 --><div class="welcome-banner"><p>欢迎参与撞钟祈福，愿您好运常在,新春快乐！</p></div></div>
</template><script>
import NavBar from '@/components/NavBar.vue';
import bellAudio from '@/assets/audio/zhong.mp3';  // MP3 格式音频
import bellVideo from '@/assets/mp4/zhong.mp4';  // MP4 格式视频
import { Howl } from 'howler';export default {data() {return {message: "",bellSound: null, // 用来保存 Howler 实例bellVideo, // 保存视频路径isButtonDisabled: false, // 控制按钮是否禁用};},components: {NavBar},mounted() {// 初始化音效（MP3）this.bellSound = new Howl({src: [bellAudio],  // 使用 import 引入的音频路径volume: 0.8,onplayerror: () => {console.error('播放音频失败');}});},methods: {// 播放撞钟音效和视频的方法ringBell() {// 播放音效（MP3）this.bellSound.play();// 获取视频元素并播放const videoElement = this.$refs.bellVideo;if (videoElement) {// 视频播放videoElement.play().catch(error => {console.error('播放视频失败:', error);});} else {console.error('未找到视频元素');}// 显示消息this.message = "恭喜你，撞钟祈福成功！";// 5秒后清除消息setTimeout(() => {this.message = "";}, 5000);// 禁用按钮，6秒后再启用this.isButtonDisabled = true;setTimeout(() => {this.isButtonDisabled = false;}, 6000); // 6秒后启用按钮}}
};
</script><style scoped>
/* 全局布局：使用 Flexbox 实现居中 */
.bell-container {display: flex;flex-direction: column; /* 垂直排列 */align-items: center;    /* 水平居中 */justify-content: center; /* 垂直居中 */text-align: center;height: 85vh; /* 占满屏幕高度 */background-color: #F9E4B7; /* 温暖的浅黄色 */padding: 20px;box-sizing: border-box;
}.welcome-banner {margin-top: 30px;background-color: #FFDD8C; /* 亮黄色背景 */padding: 36px 30px;border-radius: 5px;font-size: 18px;font-weight: bold;color: #E23E34; /* 喜庆的红色 */animation: fadeIn 3s ease-in-out;
}/* 撞钟按钮样式 */
.bell-button {padding: 12px;font-size: 14px;background-color: #f0c030; /* 喜庆的黄色 */color: white;border: none;cursor: pointer;margin-bottom: 12px;border-radius: 10px;transition: background-color 0.3s ease;
}/* 禁用按钮样式 */
.bell-button:disabled {background-color: #cccccc;cursor: not-allowed;
}/* 按钮悬停时的效果 */
.bell-button:hover {background-color: #e0b030;
}/* 播放消息 */
.message {margin-top: 20px;font-size: 20px;font-weight: bold;color: green;
}/* 令文本欢迎标语逐渐显示 */
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}video {margin-top: 20px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
</style>

2：下面是燃放烟花的组件内容。

<template><NavBar /><div class="fireworks-container"><div v-if="showText" :style="{ color: popupTextColor }" class="popup-text">{{ popupText }}</div> <!-- 弹屏显示文本 --><button @click="launchFireworks" class="fireworks-button">燃放烟花</button><div class="image-container"><img src="@/assets/images/yanhua.png" alt="烟花图标" class="yanhua-image" /><br/><span style="color: red;">多次燃放,看见不同祝福哦</span></div><canvas ref="fireworksCanvas" class="canvas-container"></canvas></div></template><script>import yanhua from '@/assets/audio/yanhua.mp3';  // MP3 格式音频import { Howl } from 'howler';import NavBar from '@/components/NavBar.vue';export default {data() {return {fireworks: [], // 存储所有的烟花粒子animationFrameId: null, // 用于停止动画fireworksAudio: null, // 用于保存音频对象showText: false, // 控制是否显示弹屏文本popupTextColor: '', // 弹屏文本的颜色popupText: '', // 当前显示的贺词// 新春贺词数组greetings: ["新春快乐，万事如意！","心想事成，春风得意！","财源广进，生意兴隆！","吉祥如意，福星高照！","花开富贵，幸福安康！","恭喜发财，步步高升！","大吉大利，心想事成！","事事顺心，岁岁平安！",],};},components: {NavBar,},mounted() {// 获取 canvas 元素this.canvas = this.$refs.fireworksCanvas;this.ctx = this.canvas.getContext("2d");// 设置 canvas 尺寸为视口宽度和高度this.canvas.width = window.innerWidth;this.canvas.height = window.innerHeight;// 初始化音效（MP3）this.fireworksAudio = new Howl({src: [yanhua],  // 使用 import 引入的音频路径volume: 0.8,onplayerror: () => {console.error('播放烟花音频失败');},});},methods: {// 启动烟花效果launchFireworks() {// 随机生成颜色const randomColor = `hsl(${Math.random() * 360}, 100%, 50%)`;this.popupTextColor = randomColor; // 设置弹屏文本的颜色// 随机选择一条新春贺词const randomGreeting = this.greetings[Math.floor(Math.random() * this.greetings.length)];console.log('随机贺词:', randomGreeting); // 打印随机选择的贺词this.popupText = randomGreeting; // 设置显示的贺词// 显示弹屏文本this.showText = true;// 设置文本显示的持续时间 (5秒)setTimeout(() => {this.showText = false;}, 5000);// 播放音效并触发烟花效果if (this.fireworksAudio) {this.fireworksAudio.play();this.fireworks = []; // 清空当前的烟花this.createFirework(randomColor); // 创建一个新的烟花并传递颜色this.animateFireworks(); // 开始绘制烟花动画} else {console.error("音频未能正确初始化！");}},// 创建一个新的烟花爆炸createFirework(color) {const firework = {x: Math.random() * this.canvas.width,y: Math.random() * (this.canvas.height / 2),color: color, // 使用传递的颜色particles: [],};for (let i = 0; i < 200; i++) {const angle = Math.random() * 2 * Math.PI;const speed = Math.random() * 5 + 2;firework.particles.push({x: firework.x,y: firework.y,speedX: Math.cos(angle) * speed,speedY: Math.sin(angle) * speed,life: 1,color: firework.color, // 设置粒子的颜色});}this.fireworks.push(firework);},// 动画渲染烟花效果animateFireworks() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);for (let i = 0; i < this.fireworks.length; i++) {const firework = this.fireworks[i];for (let j = 0; j < firework.particles.length; j++) {const particle = firework.particles[j];particle.x += particle.speedX;particle.y += particle.speedY;particle.speedY += 0.1;this.ctx.beginPath();this.ctx.arc(particle.x, particle.y, 4, 0, Math.PI * 2);this.ctx.fillStyle = particle.color;this.ctx.fill();particle.life -= 0.01;}firework.particles = firework.particles.filter(p => p.life > 0);}if (this.fireworks.some(f => f.particles.length > 0)) {this.animationFrameId = requestAnimationFrame(this.animateFireworks);} else {cancelAnimationFrame(this.animationFrameId);}},},};</script><style scoped>.fireworks-container {text-align: center;margin-top: 5px;background-color: #000;color: white;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: hidden;}.fireworks-button {background-color: #e74c3c;color: white;padding: 10px;font-size: 14px;cursor: pointer;border-radius: 5px;border: none;margin-bottom: 20px;}.image-container {margin: 20px 0;}.yanhua-image {width: 100px;height: 100px;object-fit: cover;}.canvas-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-color: transparent;}/* 弹屏文本样式 */.popup-text {position: absolute;top: 35%;left: 50%;transform: translate(-50%, -50%);font-size: 36px;font-weight: bold;opacity: 1;animation: fadeOut 3s ease-out forwards; /* 动画效果 */}/* 弹屏文本消失的动画 */@keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}</style>

最终成品网站如图所示：