<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心动告白模拟器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #ffd1dc, #e2b0ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 50px 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
max-width: 550px;
width: 90%;
position: relative;
z-index: 1;
animation: fadeIn 1s ease-out;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
h1 {
color: #ff6b93;
margin-bottom: 25px;
font-size: 2.8rem;
font-weight: 600;
letter-spacing: 1px;
background: linear-gradient(45deg, #ff6b93, #ff8e53);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
color: #888;
margin-bottom: 30px;
font-size: 1.3rem;
line-height: 1.6;
font-weight: 300;
}
.buttons {
display: flex;
justify-content: center;
gap: 25px;
margin-top: 40px;
flex-wrap: wrap;
position: relative;
}
.yes-btn {
background: linear-gradient(45deg, #ff6b93, #ff8e53);
color: white;
border: none;
padding: 16px 45px;
border-radius: 50px;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(255, 107, 147, 0.4);
position: relative;
z-index: 2;
font-weight: 600;
letter-spacing: 1px;
}
.yes-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(255, 107, 147, 0.6);
}
.no-btn {
background: linear-gradient(45deg, #a5b9ff, #c2a5ff);
color: white;
border: none;
padding: 16px 45px;
border-radius: 50px;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(165, 185, 255, 0.4);
position: relative;
z-index: 2;
font-weight: 600;
letter-spacing: 1px;
}
.no-btn:hover {
transform: translateY(-5px);
}
.message-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.message-content {
background: linear-gradient(135deg, #ffffff, #f8f9fa);
padding: 50px;
border-radius: 24px;
text-align: center;
max-width: 450px;
width: 90%;
transform: scale(0.8);
transition: all 0.5s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.message-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(45deg, #ff6b93, #ff8e53);
}
.message-container.show {
opacity: 1;
visibility: visible;
}
.message-container.show .message-content {
transform: scale(1);
}
.message-content h2 {
color: #ff6b93;
margin-bottom: 20px;
font-size: 2.2rem;
font-weight: 600;
}
.message-content p {
color: #666;
font-size: 1.3rem;
margin-bottom: 25px;
line-height: 1.6;
}
.close-btn {
background: linear-gradient(45deg, #ff6b93, #ff8e53);
color: white;
border: none;
padding: 12px 35px;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
letter-spacing: 1px;
}
.close-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(255, 107, 147, 0.4);
}
.floating-text {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
color: #ff6b93;
font-size: 1.5rem;
font-weight: 500;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
background: rgba(255, 255, 255, 0.8);
padding: 15px 25px;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 5;
max-width: 80%;
}
.floating-text.show {
opacity: 1;
}
.heart {
position: absolute;
font-size: 24px;
color: #ff6b93;
animation: float 4s ease-in-out infinite;
z-index: 0;
opacity: 0.7;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-20px) rotate(5deg); }
66% { transform: translateY(10px) rotate(-5deg); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
20%, 40%, 60%, 80% { transform: translateX(8px); }
}
.pulse {
animation: pulse 1.5s infinite;
}
.shake {
animation: shake 0.5s;
}
.counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.8);
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
color: #ff6b93;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="counter">拒绝次数: <span id="counter">0</span></div>
<div class="container">
<h1>💖 心动告白 💖</h1>
<p class="subtitle">遇见你是我最美丽的意外，<br>你的笑容是我每天的动力。</p>
<p class="subtitle">愿意和我一起创造更多美好的回忆吗？</p>
<div class="buttons">
<button class="yes-btn pulse">可以 💕</button>
<button class="no-btn">不要 😢</button>
</div>
</div>
<div class="floating-text" id="floating-text"></div>
<div class="message-container" id="message-container">
<div class="message-content">
<h2>太棒了！ 💖</h2>
<p>爱你哟～ 这是我今天最开心的事情！</p>
<p>让我们一起创造美好的回忆吧！</p>
<button class="close-btn">关闭</button>
</div>
</div>
<script>
// 温馨字幕数组
const messages = [
"你的眼睛里有星辰大海，让我沉醉其中",
"每次见到你，我的心跳都会加速",
"你是我平淡生活中的一抹亮色",
"和你在一起的每一刻都值得珍藏",
"你的微笑是我每天最期待的画面",
"我想和你一起看遍世间所有风景",
"你是我心中最特别的存在",
"没有你的日子，连阳光都失去了温度",
"我想成为那个让你每天都开心的人",
"你的存在让我的世界变得更加完整",
"我愿意用一生的时间，去了解你的所有",
"你是我做过最美的梦，也是我最想实现的现实",
"我想牵着你的手，走过春夏秋冬",
"你的名字，是我听过最短的情诗"
];
// 创建漂浮的爱心
function createHearts() {
const container = document.querySelector('body');
const heartCount = 20;
for (let i = 0; i < heartCount; i++) {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '💖';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.top = Math.random() * 100 + 'vh';
heart.style.animationDelay = Math.random() * 5 + 's';
heart.style.fontSize = (Math.random() * 25 + 20) + 'px';
container.appendChild(heart);
}
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
createHearts();
const yesBtn = document.querySelector('.yes-btn');
const noBtn = document.querySelector('.no-btn');
const messageContainer = document.getElementById('message-container');
const closeBtn = document.querySelector('.close-btn');
const floatingText = document.getElementById('floating-text');
const counterElement = document.getElementById('counter');
let noClickCount = 0;
let usedMessages = [];
// "可以"按钮点击事件
yesBtn.addEventListener('click', function() {
messageContainer.classList.add('show');
});
// 关闭消息
closeBtn.addEventListener('click', function() {
messageContainer.classList.remove('show');
});
// "不要"按钮移动逻辑
noBtn.addEventListener('mouseover', function() {
moveButton(noBtn);
});
noBtn.addEventListener('click', function() {
// 更新计数器
noClickCount++;
counterElement.textContent = noClickCount;
// 显示随机字幕
showRandomMessage();
// 点击"不要"时添加抖动动画
noBtn.classList.add('shake');
setTimeout(() => {
noBtn.classList.remove('shake');
}, 500);
// 移动按钮
moveButton(noBtn);
// 增强"可以"按钮的脉动效果
yesBtn.classList.remove('pulse');
setTimeout(() => {
yesBtn.classList.add('pulse');
}, 10);
});
// 显示随机字幕
function showRandomMessage() {
// 如果所有消息都已使用，重置
if (usedMessages.length >= messages.length) {
usedMessages = [];
}
// 获取未使用的随机消息
let availableMessages = messages.filter(msg => !usedMessages.includes(msg));
const randomMessage = availableMessages[Math.floor(Math.random() * availableMessages.length)];
// 标记为已使用
usedMessages.push(randomMessage);
// 显示消息
floatingText.textContent = randomMessage;
floatingText.classList.add('show');
// 3秒后隐藏消息
setTimeout(() => {
floatingText.classList.remove('show');
}, 3000);
}
// 移动按钮的函数
function moveButton(button) {
const container = document.querySelector('.container');
const containerRect = container.getBoundingClientRect();
const buttonRect = button.getBoundingClientRect();
// 计算按钮在容器内的最大移动范围
const maxX = containerRect.width - buttonRect.width - 20;
const maxY = containerRect.height - buttonRect.height - 20;
// 生成随机位置
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
// 应用新位置
button.style.position = 'absolute';
button.style.left = randomX + 'px';
button.style.top = randomY + 'px';
}
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html