❤️ 用代码写一场浪漫：一个 520 告白网页诞生了！
520 快到了。有人送花，有人送礼物，而程序员的浪漫，是把喜欢写进代码里。
最近，我用 HTML + CSS + JavaScript做了一个「520 浪漫告白网页」。
它不仅仅是一个静态页面，更像是一场带有仪式感的小型互动动画。
🌸 页面效果有哪些？
这次的网页加入了很多浪漫元素：
✅ 渐变梦幻背景✅ 漂浮爱心动画✅ 页面切换跳转效果✅ 打字机文字动画✅ 音乐播放按钮✅ 心跳文字特效✅ 图片动态缩放✅ 进入式浪漫交互
点击“进入浪漫”按钮后，页面会自动切换到告白场景：
“遇见你之后，星河长明，春暖花开。”
那一刻，真的很适合发给喜欢的人。
💻 技术其实并不复杂
整个项目使用的是前端三件套：
没有使用复杂框架，但通过动画与交互设计，依然能做出很有氛围感的页面。
比如：
❤️ 爱心飘落效果
通过 JavaScript 动态创建元素：
setInterval(createHeart,250);
让页面不断生成漂浮爱心。
✨ 页面切换动画
利用 CSS 的 transform 与 transition：
transform: translateY(100%);transition: 1s;
实现页面滑动进入效果。
⌨️ 打字机文字动画
通过 steps() 实现逐字显示：
animation: typing 5s steps(30) forwards;
仪式感瞬间拉满。
🎵 程序员的浪漫是什么？
有人觉得代码冰冷。但其实，代码也能有温度。
它可以是：
深夜写下的一段动画，一个偷偷准备的网页，一次认真设计的告白。
技术不只是工具，也是表达情感的方式。
📱 这个网页还能怎么玩？
你可以：
✨ 改成情侣相册✨ 加入专属照片✨ 替换成自己的音乐✨ 增加烟花特效✨ 做成生日祝福页✨ 部署到服务器发给 Ta
甚至还能：
做成微信 H5 页面，直接分享到朋友圈。
❤️ 最后
520 的意义，从来不是数字本身。
而是：
“我愿意花时间，为你制造浪漫。”
如果你也想试试，不妨亲手写一个属于自己的告白页面。
毕竟：
最动人的代码，永远运行在真心里。
—— END ——
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>520 浪漫告白</title><style>*{ margin:0; padding:0; box-sizing:border-box;}body{ overflow:hidden; font-family:"Microsoft YaHei",sans-serif; background:linear-gradient(135deg,#ff758c,#ff7eb3,#ffb199); height:100vh; display:flex; justify-content:center; align-items:center;}/* 页面切换 */.page{ position:absolute; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:1s;}/* 首页 */#page1{ z-index:2;}.title{ font-size:80px; color:#fff; text-shadow:0 0 20px rgba(255,255,255,.8); animation:float 2s infinite alternate;}.desc{ margin-top:20px; color:#fff; font-size:28px;}.start-btn{ margin-top:40px; padding:15px 50px; border:none; border-radius:50px; font-size:22px; background:#fff; color:#ff4f7b; cursor:pointer; transition:.3s;}.start-btn:hover{ transform:scale(1.1); background:#ff4f7b; color:#fff;}/* 第二页 */#page2{ transform:translateY(100%); background:rgba(255,255,255,.1); backdrop-filter:blur(8px);}.show{ transform:translateY(0) !important;}.hide{ transform:translateY(-100%) !important;}.love-text{ font-size:55px; color:#fff; animation:heartBeat 1s infinite;}.typing{ margin-top:25px; font-size:30px; color:#fff; border-right:3px solid #fff; white-space:nowrap; overflow:hidden; width:0; animation:typing 5s steps(30) forwards;}.photo{ width:220px; height:220px; border-radius:20px; margin-top:35px; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:zoom 2s infinite alternate;}/* 爱心 */.heart{ position:absolute; color:red; animation:rise linear forwards;}@keyframes rise{ from{ transform:translateY(100vh) scale(0); opacity:1; } to{ transform:translateY(-10vh) scale(1.5); opacity:0; }}@keyframes float{ from{ transform:translateY(0px); } to{ transform:translateY(-15px); }}@keyframes heartBeat{ 0%{ transform:scale(1); } 50%{ transform:scale(1.15); } 100%{ transform:scale(1); }}@keyframes typing{ from{ width:0; } to{ width:520px; }}@keyframes zoom{ from{ transform:scale(1); } to{ transform:scale(1.08); }}/* 音乐按钮 */.music-btn{ position:fixed; top:20px; right:20px; width:60px; height:60px; border-radius:50%; border:none; font-size:28px; cursor:pointer; background:#fff; color:#ff4f7b; animation:rotate 3s linear infinite;}@keyframes rotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); }}</style></head><body><!-- 首页 --><divclass="page"id="page1"> <h1class="title">❤️ 520 ❤️</h1> <pclass="desc">点击进入属于我们的浪漫</p> <buttonclass="start-btn"onclick="enterLove()"> 进入浪漫 </button></div><!-- 第二页 --><divclass="page"id="page2"> <divclass="love-text">我喜欢你 ❤️</div> <divclass="typing"> 遇见你之后，星河长明，春暖花开。 </div> <!-- 可替换为你自己的图片 --> <img class="photo" src="https://picsum.photos/300/300" /></div><!-- 音乐 --><audioid="bgm"loop> <sourcesrc="https://www.w3schools.com/html/horse.mp3"type="audio/mpeg"></audio><buttonclass="music-btn"onclick="toggleMusic()"> 🎵</button><script>// 页面切换function enterLove(){ document.getElementById("page1").classList.add("hide"); document.getElementById("page2").classList.add("show"); document.getElementById("bgm").play();}// 爱心特效function createHeart(){ const heart = document.createElement("div"); heart.className = "heart"; heart.innerHTML = "❤"; heart.style.left = Math.random()*100 + "vw"; heart.style.fontSize = Math.random()*30 + 20 + "px"; heart.style.animationDuration = Math.random()*3 + 3 + "s"; document.body.appendChild(heart); setTimeout(()=>{ heart.remove(); },6000);}setInterval(createHeart,250);// 音乐控制let playing = false;function toggleMusic(){ const music = document.getElementById("bgm"); if(playing){ music.pause(); }else{ music.play(); } playing = !playing;}</script></body></html>
10个月宝宝每天需要喝多少奶粉？
