vue实现表白
Vue 实现表白页面
使用 Vue 可以快速创建一个动态、交互性强的表白页面。以下是一个简单的实现方案，包含核心功能和代码示例。
准备工作
- 安装 Vue 3（可通过 CDN 或 npm 安装）
- 准备基础 HTML 结构
- 设计表白页面的样式和交互效果
核心代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浪漫表白</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
}
.container {
text-align: center;
padding: 2rem;
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
max-width: 500px;
position: relative;
z-index: 1;
}
h1 {
color: #e91e63;
margin-bottom: 1.5rem;
}
p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
}
button {
background-color: #e91e63;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 10px;
}
button:hover {
background-color: #c2185b;
transform: scale(1.05);
}
.heart {
position: absolute;
pointer-events: none;
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<div>
<button @click="accept">接受</button>
<button @mouseover="moveAway" @click="moveAway">拒绝</button>
</div>
</div>
<div v-for="(heart, index) in hearts" :key="index" class="heart" :style="heart.style">
❤️
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const title = ref('致我最爱的人');
const message = ref('遇见你是我的幸运，愿意和我一起走过余生吗？');
const hearts = ref([]);
const accept = () => {
message.value = '太棒了！我会用一生来爱你 ❤️';
createHearts(20);
};
const moveAway = (event) => {
if (event.type === 'mouseover') {
const button = event.target;
button.style.position = 'absolute';
button.style.left = `${Math.random() * 80}%`;
button.style.top = `${Math.random() * 80}%`;
}
};
const createHearts = (count) => {
for (let i = 0; i < count; i++) {
hearts.value.push({
style: {
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
fontSize: `${Math.random() * 20 + 10}px`,
opacity: Math.random() * 0.5 + 0.5,
animationDelay: `${Math.random() * 2}s`
}
});
}
};
return {
title,
message,
hearts,
accept,
moveAway
};
}
}).mount('#app');
</script>
</body>
</html>功能扩展建议
添加背景音乐 在页面加载时自动播放浪漫背景音乐：
// 在 setup() 中添加
const playMusic = () => {
const audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
audio.loop = true;
audio.play();
};
// 在 onMounted 中调用
onMounted(() => {
playMusic();
});添加照片展示 创建照片轮播组件展示共同回忆：
<div class="photo-slider">
<img v-for="(photo, index) in photos"
:key="index"
:src="photo"
:class="{ active: currentPhoto === index }">
</div>添加响应式设计 使用 CSS 媒体查询确保在不同设备上良好显示：
@media (max-width: 600px) {
.container {
width: 90%;
padding: 1rem;
}
h1 {
font-size: 1.5rem;
}
}部署建议
- 将代码保存为 HTML 文件直接打开即可运行
- 如需在线分享，可部署到 GitHub Pages 或 Netlify
- 考虑添加域名重定向，如 ILoveYou.com 等浪漫域名
这个表白页面包含了动态文字、互动按钮、漂浮爱心等浪漫元素，可以根据需要进一步自定义内容和样式。
