用代码写一场浪漫:一个 520 告白网页诞生了!
- 2026-09-25 09:31:59
用代码写一场浪漫:一个 520 告白网页诞生了!
全部代码：
❤️ 用代码写一场浪漫：一个 520 告白网页诞生了！
520 快到了。有人送花，有人送礼物，而程序员的浪漫，是把喜欢写进代码里。
最近，我用 HTML + CSS + JavaScript做了一个「520 浪漫告白网页」。
它不仅仅是一个静态页面，更像是一场带有仪式感的小型互动动画。
🌸 页面效果有哪些？
这次的网页加入了很多浪漫元素：
✅ 渐变梦幻背景✅ 漂浮爱心动画✅ 页面切换跳转效果✅ 打字机文字动画✅ 音乐播放按钮✅ 心跳文字特效✅ 图片动态缩放✅ 进入式浪漫交互
点击“进入浪漫”按钮后，页面会自动切换到告白场景：
“遇见你之后，星河长明，春暖花开。”
那一刻，真的很适合发给喜欢的人。
💻 技术其实并不复杂
整个项目使用的是前端三件套：
HTML
CSS
JavaScript
没有使用复杂框架，但通过动画与交互设计，依然能做出很有氛围感的页面。
比如：
❤️ 爱心飘落效果
通过 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><!-- 可替换为你自己的图片 --><imgclass="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>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
