纯HTML可实现三种浪漫表白页：一、渐变背景+心跳动画文字；二、点击触发淡入弹窗告白；三、滚动逐行浮现诗意情书。均无需后端，保存为.html即可运行。
如果您希望用纯 HTML 代码创建一个浪漫的表白页面，无需后端或复杂框架，仅通过结构化标签、内联样式与基础交互即可实现视觉温暖、情感真挚的效果。以下是几种可独立运行的实现方法：
一、纯静态渐变文字+心跳动画表白页
该方法利用 CSS 内联样式控制背景渐变、文字悬浮放大及伪元素模拟心跳节奏，所有代码可保存为 .html 文件直接双击打开。
1、新建文本文件，将后缀改为 .html（例如：love.html）。
2、用记事本或代码编辑器打开，粘贴以下内容：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>致你</title><style>body{margin:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#ff9a9e,#fad0c4,#a1c4fd);font-family:'Segoe UI',sans-serif;overflow:hidden;}h1{font-size:4.5rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.2);animation:beat 2.5s infinite;}.heart{display:inline-block;margin:0 8px;vertical-align:middle;animation:beat 2.5s infinite;}@keyframes beat{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}</style></head><body><h1>我喜欢你<span class="heart">❤</span></h1></body></html>
3、保存文件，双击运行，页面中央将显示带呼吸式缩放的“我喜欢你”及跳动红心。
二、点击触发弹窗式告白页
该方法使用原生 JavaScript 内联事件绑定，点击任意位置即弹出居中半透明模态框，展示手写体告白语句，并伴随淡入过渡效果。
1、新建 HTML 文件，粘贴如下代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>悄悄话</title><style>body{margin:0;height:100vh;background:#f5f7fa;display:flex;justify-content:center;align-items:center;font-family:'Courier New',monospace;cursor:pointer;}#modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all 0.4s ease;}.modal-content{background:#fff;border-radius:12px;padding:40px 60px;max-width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.2);transform:scale(0.9);transition:all 0.4s ease;}.modal-content h2{color:#e74c3c;font-size:2.8rem;margin:0;font-weight:normal;letter-spacing:2px;}.modal-content p{color:#34495e;font-size:1.4rem;line-height:1.6;margin-top:20px;}#modal.show{opacity:1;visibility:visible;}#modal.show .modal-content{transform:scale(1);}</style></head><body onclick="document.getElementById('modal').classList.add('show')"><div id="modal"><div class="modal-content"><h2>从遇见你那天起</h2><p>我的时间，就不再按秒计算了</p></div></div></body></html>
2、保存后打开，单击屏幕任意处，告白弹窗将自中心淡入展开。
三、滚动浮现式诗意表白页
该方法借助 scroll 事件监听与元素 opacity 动态控制，使多段告白语句随用户向下滚动逐行浮现，营造娓娓道来的叙事感。
1、新建 HTML 文件，粘贴以下代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>一页情书</title><style>body{margin:0;font-family:'Noto Serif SC','Georgia',serif;background:#fdf6f0;color:#5d4037;line-height:2.2;font-size:1.3rem;}.line{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}.line.show{opacity:1;transform:translateY(0);}hr{border:0;border-top:1px dashed #e0c9b3;margin:40px auto;width:60%;}</style></head><body><div class="line">你笑的时候，光落进我眼睛里</div><hr><div class="line">我数过，一共17次想告诉你</div><hr><div class="line">余生很短，但我想，慢慢写满你</div><script>const lines=document.querySelectorAll('.line');const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('show');}})},{threshold:0.1});lines.forEach(line=>observer.observe(line));</script></body></html>
2、保存并打开，缓慢向下滚动，每段文字将在进入视口时柔和上浮显现。
四、CSS Grid 心形拼贴表白墙
该方法使用 CSS Grid 布局与 Unicode 心形字符组合成视觉心形图案，所有文字均为 HTML 内容，不依赖图片资源。
1、新建 HTML 文件，粘贴如下代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>心形墙</title><style>body{margin:0;background:#fff8f9;display:flex;justify-content:center;align-items:center;height:100vh;font-family:'ZCOOL KuaiLe','Comic Sans MS';}.heart-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;padding:20px;}.heart-grid div{font-size:2.2rem;color:#ff6b6b;text-align:center;line-height:1;}.row1{grid-column:2/9;}.row2{grid-column:1/10;}.row3{grid-column:1/10;}.row4{grid-column:2/9;}.row5{grid-column:3/8;}.row6{grid-column:4/7;}</style></head><body><div class="heart-grid"><div class="row1">❤❤❤❤❤❤❤</div><div class="row2">❤❤❤❤❤❤❤❤❤</div><div class="row3">❤❤❤❤❤❤❤❤❤</div><div class="row4">❤❤❤❤❤❤❤</div><div class="row5">❤❤❤❤❤</div><div class="row6">❤❤❤</div></div><p style="position:fixed;bottom:30px;left:0;right:0;text-align:center;font-size:1.4rem;color:#ff5252;font-weight:bold;">——这是我为你写的第1页——</p></body></html>
2、保存后打开，页面中央呈现由 Unicode 心形字符构成的实心心形图案，底部固定提示语高亮显示关键信息。
