纯HTML+CSS即可做出体面情人节页面，JS仅需1–2行动效；用SVG爱心+CSS动画实现流畅心跳，配合viewport、flex居中、渐变背景及原生dialog弹窗，兼顾兼容性与体验。
直接说结论：用纯 HTML + CSS 就能做出体面的情人节页面，JavaScript 只需加 1–2 行动效（比如心跳、飘心），别一上来就套框架或搞复杂动画——90% 的“情人节页面”失败，是因为过早引入 JS 逻辑和第三方库，反而卡在 CORS、CDN 加载失败或移动端 touch 事件兼容上。
怎么让爱心图标动起来（不靠 JS 库）
CSS @keyframes 配合 animation 是最轻量、最稳的方案。重点不是“多炫”，而是“不闪、不卡、不挡点击”。常见错误是把 animation-iteration-count: infinite 和 transform: scale() 直接套在 <img> 上，结果 Safari 下缩放模糊、安卓微信里跳帧。
- 用 SVG 写爱心（
<svg viewBox="0 0 100 100"><path d="M50,30 A20,20 0 0,1 70,50 L50,80 L30,50 A20,20 0 0,1 50,30 Z"/></svg>），比 PNG 更清晰、更易控制颜色和大小 - 心跳动效建议用
scale(1) → scale(1.15) → scale(1)，总时长控制在0.8s，animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)模拟真实收缩感 - 别给所有爱心加同一动画；用
animation-delay错开 0.1–0.3s，视觉更自然
文字居中+背景渐变适配手机（CSS Flex + viewport）
情人节页面最常被忽略的是「在 iPhone 上字被切掉」「安卓浏览器里背景色块没铺满」。这不是设计问题，是 viewport 和 min-height 没设对。
- 必须加这行
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 默认按 980px 渲染 - 主内容区用
display: flex; flex-direction: column; justify-content: center; align-items: center;，比text-align: center+margin: auto更可靠 - 背景渐变写成
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)，别用 HSL 或透明度太高的值——部分低端安卓机不支持hsla()渐变
点击“我爱你”弹出告白文案（原生 onclick 足够）
不需要 Vue/React 状态管理，也不用引入 dialog polyfill。现代浏览器（Chrome 97+、Safari 15.4+、Edge 101+）都支持 <dialog>，但要注意两个坑：
立即学习“前端免费学习笔记（深入）”；
-
<dialog>默认不可见，必须显式调用showModal()；但直接写onclick="myDialog.showModal()"会报错，因为 DOM 还没加载完 —— 解决办法：把<script>放在</body>前，或用DOMContentLoaded - 移动端点透问题：如果弹窗里有个按钮，点它会同时触发背后区域的 click —— 给
<dialog>加tabindex="-1"并聚焦，再监听click事件判断event.target === dialog才关闭 - 示例最小可用结构：
<button onclick="document.getElementById('love-dialog').showModal()">我爱你</button> <dialog id="love-dialog"> <p>今天也想你了</p> <button onclick="this.closest('dialog').close()">关掉</button> </dialog>
真正难的不是写动效或弹窗，而是把字体大小、行高、按钮 padding 在 iOS 和安卓上都调得刚好——比如 font-size: clamp(1.2rem, 4vw, 2.5rem) 比固定 24px 更稳妥，但很多人忘了测试微信内置浏览器对 clamp() 的支持程度（iOS 微信 8.0.30+ 支持，安卓微信仍部分不支持）。
