前言

520 又到了，还在发红包？发段子？太普通了。

今天小虾 🦐 分享一个纯前端实现的表白网页，不需要服务器、不需要数据库，打开就能用。

完整代码已开源，可直接拿去用或自行魔改。

---

效果一览

• • 💗 粉色渐变背景 + CSS 跳动爱心
• • 🎵 网易云音乐自动播放
• • ⌨️ 打字机效果逐字输出情话
• • 🏃 "考虑一下"按钮会躲开鼠标
• • 🎊 点"接受"触发花瓣雨特效

---

核心代码拆解

1. CSS 跳动爱心

用 CSS ::before + ::after 伪元素画两个圆，组合成心形，配合 rotate(-45deg) 旋转，最后用 @keyframes heartbeat 控制缩放动画：

.heart {
    width: 100px;
    height: 100px;
    background-color: #ff4d4d;
    transform: rotate(-45deg);
    animation: heartbeat 1.2s infinite;
}
.heart::before,
.heart::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ff4d4d;
    border-radius: 50%;
}
.heart::before { top: -50px; left: 0; }
.heart::after { top: 0; left: 50px; }

@keyframes heartbeat {
    0%   { transform: scale(1) rotate(-45deg); }
    20%  { transform: scale(1.3) rotate(-45deg); }
    40%  { transform: scale(1) rotate(-45deg); }
    60%  { transform: scale(1.2) rotate(-45deg); }
    100% { transform: scale(1) rotate(-45deg); }
}

2. 打字机效果

逐字读取情话字符串，通过 setTimeout 递归控制输出节奏，换行符渲染为 <br> 标签：

const text = "翠花，遇见你是我最美好的意外...\n往后余生，风雪是你，\n平淡是你，心底温柔也是你。\n520快乐！";

function typeWriter() {
    if (index < text.length) {
        if (text.charAt(index) === '\n') {
            typewriterElement.innerHTML += '<br>';
        } else {
            typewriterElement.innerHTML += text.charAt(index);
        }
        index++;
        setTimeout(typeWriter, 150);
    }
}
window.onload = typeWriter;

3. 按钮瞬移（核心笑点 🏃💨）

鼠标悬停和点击时，通过 Math.random() 随机生成坐标，将按钮 position: fixed 覆盖全屏，实现"按钮跑了"的交互：

function moveButton() {
    const x = Math.random() * (window.innerWidth - rejectBtn.offsetWidth - 100);
    const y = Math.random() * (window.innerHeight - rejectBtn.offsetHeight - 100);
    rejectBtn.style.position = 'fixed';
    rejectBtn.style.left = x + 'px';
    rejectBtn.style.top = y + 'px';
}

rejectBtn.addEventListener('mouseover', moveButton);
rejectBtn.addEventListener('click', moveButton);

4. 花瓣飘落特效

点击"接受"后，每 100ms 动态创建一个 DOM 元素，随机位置 + 随机动画时长 + emoji 符号，配合 requestAnimationFrame 思路的 setInterval 持续生成：

function createFallingItem() {
    const item = document.createElement('div');
    item.classList.add('falling-item');
    item.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    item.style.left = Math.random() * 100 + 'vw';
    item.style.animationDuration = (Math.random() * 3 + 2) + 's';
    fallingContainer.appendChild(item);
    setTimeout(() => item.remove(), 5000);
}

setInterval(createFallingItem, 300);

---

如何获取完整文件 & 自定义

方法一：直接复制（推荐）

上面的代码片段已经覆盖了全部核心功能，直接复制保存为 .html 文件即可运行。

方法二：完整可运行文件 + 配套素材

博客里贴的是核心拆解片段，完整可运行文件、粉色渐变背景图、动效预调参数已整理好，一键下载直接用。

获取方式：直接保存下方代码块为 index.html，或搜索作者wx**「虾搞AI实验室」**，回复关键词 520 领取打包文件。

<!-- 👇 完整代码见：搜索「虾搞AI实验室」回复520领取 👇 -->
<!-- 作者：小虾 🦐 | 工具/素材见作者首页简介 -->
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 完整代码过长，这里省略，建议下载完整版 -->
</html>

情话 & 音乐自定义

情话内容在 JS 开头，直接改字符串即可：

const text = "小美，遇见你是我最美好的意外...";
// 改成你们的名字和专属情话

音乐播放器用的是网易云外链，替换歌曲 ID 即可：

<iframe src="https://music.163.com/outchain/player?type=2&id=歌曲ID&auto=1&height=66">
</iframe>

---

技术栈总结

功能	技术方案
爱心动画	CSS ::before/::after + @keyframes
打字机效果	JavaScript 字符串遍历 + setTimeout
按钮瞬移	mouseover/click 事件 + Math.random() 坐标
花瓣飘落	DOM 动态创建 + CSS animation
背景音乐	网易云音乐 iframe 外链

零依赖，纯原生，无框架，一文件搞定。

---

写在最后

代码可以写情书，AI 可以帮你表白。

但那份想让对方开心的心意，才是真正打动人的东西。

工具只是加了点心意的"包装纸"。

愿你今天鼓起勇气，发出那条消息。

祝有情人终成眷属。 💕

---

🦐 一起成长，一起进化

---

标签： 前端 | HTML | CSS | JavaScript | 520 | 表白 | 开源 | 程序员 | 创意

分类： 前端 | JavaScript