点我看看对象有多爱你
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
font-family: 'PingFang SC', sans-serif;
overflow: hidden;
}
.container {
text-align: center;
z-index: 10;
position: relative;
}
.big-btn {
width: 220px;
height: 220px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #ff6b9d, #c44569);
color: #fff;
font-size: 22px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 0 40px rgba(255,107,157,0.4);
transition: all 0.3s ease;
line-height: 1.4;
user-select: none;
position: relative;
}
.big-btn:active { transform: scale(0.92); }
.hint {
margin-top: 24px;
color: rgba(255,255,255,0.4);
font-size: 14px;
transition: opacity 0.3s;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: rgba(255,255,255,0.95);
padding: 30px 40px;
border-radius: 24px;
font-size: 20px;
font-weight: 600;
color: #c44569;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
z-index: 100;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
max-width: 80vw;
text-align: center;
}
.popup.show { transform: translate(-50%, -50%) scale(1); }
.heart {
position: fixed;
font-size: 24px;
pointer-events: none;
z-index: 50;
animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
100% { opacity: 0; transform: translateY(-300px) scale(0.3) rotate(45deg); }
}
.breakup-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.95);
z-index: 200;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.breakup-overlay.show {
opacity: 1;
pointer-events: all;
}
.breakup-text {
color: #ff4444;
font-size: 36px;
font-weight: 800;
margin-bottom: 50px;
text-shadow: 0 0 30px rgba(255,68,68,0.5);
}
.breakup-btns {
display: flex;
gap: 30px;
}
.breakup-btn {
padding: 16px 40px;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.breakup-btn.confirm {
background: #ff4444;
color: #fff;
}
.breakup-btn.think {
background: #fff;
color: #c44569;
}
.breakup-btn:hover { transform: scale(1.05); }
.reveal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: #1a1a2e;
z-index: 300;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.reveal-overlay.show {
opacity: 1;
pointer-events: all;
}
.reveal-text {
color: #ff6b9d;
font-size: 32px;
font-weight: 800;
text-align: center;
line-height: 1.6;
text-shadow: 0 0 40px rgba(255,107,157,0.6);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
点我看看对象有多爱你
多点几下试试？
我们分手吧
确认
再想想
骗你的这辈子都不可能分手爱你爱到按钮都追不上你
const btn = document.getElementById('loveBtn');
const popup = document.getElementById('popup');
const hint = document.getElementById('hint');
const breakupOverlay = document.getElementById('breakupOverlay');
const confirmBtn = document.getElementById('confirmBtn');
const thinkBtn = document.getElementById('thinkBtn');
const revealOverlay = document.getElementById('revealOverlay');
let clickCount = 0;
let popupTimer = null;
let isRunning = false;
const loveLines = [
"爱你爱到手机都没电了还在想你",
"你就是我的充电宝，没你我不行",
"别人问我理想型，我直接报你身份证号",
"我对你的喜欢，比奶茶还甜",
"你是我熬夜的理由，也是早起的动力",
"全世界那么多人，我的GPS只导航到你",
"你一笑，我脑子里的烟花就放了一整晚",
"喜欢你这件事，我已经续费到永远了",
"你是我手机里唯一不想设免打扰的人",
"我对你的爱，比WiFi信号还稳"
];
const runLines = [
"抓不到我吧？嘿嘿",
"你手速不行啊",
"再点？按钮要跑路了",
"别追了别追了",
"我闪！我闪！我闪闪闪！",
"你对象都比你手快"
];
function spawnHearts(count) {
const emojis = ['❤️','💕','💖','💗','😘','🥰'];
for (let i = 0; i {
const h = document.createElement('div');
h.className = 'heart';
h.textContent = emojis[Math.floor(Math.random() * emojis.length)];
h.style.left = (Math.random() * 80 + 10) + 'vw';
h.style.top = (Math.random() * 40 + 40) + 'vh';
h.style.fontSize = (Math.random() * 20 + 16) + 'px';
document.body.appendChild(h);
setTimeout(() => h.remove(), 1500);
}, i * 80);
}
}
function spawnMassiveHearts() {
const emojis = ['❤️','💕','💖','💗','😘','🥰','💘','💝'];
for (let i = 0; i {
const h = document.createElement('div');
h.className = 'heart';
h.textContent = emojis[Math.floor(Math.random() * emojis.length)];
h.style.left = (Math.random() * 100) + 'vw';
h.style.top = (Math.random() * 100) + 'vh';
h.style.fontSize = (Math.random() * 40 + 20) + 'px';
document.body.appendChild(h);
setTimeout(() => h.remove(), 1500);
}, i * 50);
}
}
function showPopup(text) {
clearTimeout(popupTimer);
popup.textContent = text;
popup.classList.add('show');
popupTimer = setTimeout(() => {
popup.classList.remove('show');
}, 2500);
}
function moveButton() {
const maxX = window.innerWidth / 2 - 110;
const maxY = window.innerHeight / 2 - 110;
const offsetX = (Math.random() - 0.5) * maxX * 1.5;
const offsetY = (Math.random() - 0.5) * maxY * 1.5;
btn.style.transform = translate({offsetX}px, {offsetY}px);
}
function triggerBreakup() {
isRunning = true;
btn.style.opacity = '0';
hint.style.opacity = '0';
setTimeout(() => {
breakupOverlay.classList.add('show');
}, 300);
}
function triggerReveal() {
breakupOverlay.classList.remove('show');
setTimeout(() => {
revealOverlay.classList.add('show');
spawnMassiveHearts();
setTimeout(() => {
revealOverlay.classList.remove('show');
btn.style.opacity = '1';
btn.style.transform = 'translate(0, 0)';
hint.style.opacity = '1';
hint.textContent = '还敢点吗？😏';
clickCount = 0;
isRunning = false;
}, 4000);
}, 500);
}
confirmBtn.addEventListener('click', triggerReveal);
thinkBtn.addEventListener('click', triggerReveal);
btn.addEventListener('click', () => {
if (isRunning) return;
clickCount++;
spawnHearts(clickCount > 5 ? 12 : 6);
if (clickCount
刚才说的配套"对象服从性测试"要不要也一起做了？出几道送命题，答错弹惩罚，和这个连用整蛊效果更炸。
举报
html2.link
·粘贴 HTML，一键生成链接