七夕佳节，当传统浪漫邂逅现代科技，会碰撞出怎样的火花？今天，就随编程狮一同走进一个程序员精心打造的七夕表白网页，探索代码背后的深情，同时学习如何运用 HTML、CSS 和 JavaScript 打造出令人眼前一亮的互动效果。无论你是编程初学者，还是对浪漫编程充满好奇的爱好者，本文都将为你详细解析，开启一段编程与浪漫交织的学习之旅。（完整源码在文末）
一、初窥浪漫网页的神秘面纱
打开这个七夕表白网页，首先映入眼帘的是深邃的夜空背景，繁星点点，仿佛将人带入一个梦幻的宇宙空间。而飘落的代码雨，如同一场科技感十足的视觉盛宴，为这个浪漫的节日增添了一份独特的神秘氛围。中央的表白文字，以打字机般的节奏缓缓出现，将程序员的心声一字一句地呈现在爱人面前。页面下方的互动按钮，等待着爱人回应这跨越代码的爱意。这一切背后，都离不开 HTML、CSS 和 JavaScript 的精妙配合。
二、搭建浪漫的基石：HTML 结构
HTML 是构建网页的基础，如同搭建一座浪漫城堡的砖石。在这个表白网页中，HTML 负责规划页面的布局和内容框架。它定义了页面的头部、主要展示区域、互动部分以及页脚等各个板块。以表白卡片为例，HTML 通过 <div> 标签创建了一个独立的区域，为后续的样式和交互做好了准备。
<div class="bg-slate-800/70 backdrop-blur-md rounded-xl p-6 md:p-8 shadow-2xl shadow-primary/20 border border-primary/30 mb-12 transform transition-all duration-500 hover:shadow-primary/40 hover:-translate-y-1">
<!-- 表白卡片内容 -->
</div>
这段代码在编程狮平台的HTML + CSS 基础实战“div 元素嵌套”章节中，初学者可以轻松理解 <div> 是如何作为容器，承载后续的文本、图片等元素。通过设置不同的类名，如 bg-slate-800/70 等，为这个表白卡片赋予了初始的外观特性，等待 CSS 的进一步美化。
三、渲染浪漫色彩：CSS 样式设计
CSS 是网页的化妆师，它为 HTML 构建的结构涂上浪漫的色彩。在这个表白网页中，CSS 不仅设置了整体的深色浪漫主题，还通过各种样式类，为页面的每个元素赋予了独特的外观和动画效果。
.text-shadow-glow {
text-shadow: 0 0 15px rgba(147, 51, 234, 0.8);
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}
.heart {
transform-origin: center;
animation: pulse 1.5s infinite;
}
在 W3Cschool 的 CSS 入门课程里，初学者可以学习到 text-shadow 如何为文字添加光晕效果，让 “七夕 · 2025” 的标题在页面上熠熠生辉；animation 属性又是怎样驱动星星的闪烁和爱心的跳动，赋予页面灵动的生命力。这些样式代码如同画家的笔触，将一个静态的网页变成了一幅充满动感的浪漫画卷。
四、注入浪漫灵魂：JavaScript 动态交互
JavaScript 是这个表白网页的灵魂工程师，它让页面从静态展示跃升为动态互动。通过 JavaScript，程序员实现了星空背景的随机生成、代码雨的流动效果、打字机文字的逐步输出，以及互动按钮的趣味反馈。
// 创建星空背景
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
const size = Math.random() * 3 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * 2}s`;
starsContainer.appendChild(star);
}
}
学完编程狮的 JavaScript 基础实战，就可以理解并掌握这段代码是如何利用循环和随机函数，创造出独一无二的星空背景。每一次页面的加载，都是一个新的浪漫星空的诞生。而类似的逻辑也被应用在代码雨和打字机效果中，让页面充满了不可预测的惊喜和活力。
五、动手实践：打造你的专属浪漫网页
了解了这个七夕表白网页的构建原理后，是不是也想亲手打造一个属于自己的浪漫作品呢？编程狮平台提供了丰富的学习资源和在线编辑器，你可以从简单的 HTML 结构开始，逐步添加 CSS 样式和 JavaScript 功能。比如，你可以尝试修改代码雨中的字符集，加入更多你和爱人之间的专属符号；或者调整动画的速度和效果，让表白更加符合你的心意。
在学习过程中，遇到任何问题，都可以在编程狮的社区中寻求帮助，与其他编程爱好者交流心得。通过实践，你不仅能提升自己的编程技能，还能将这份浪漫的创造力传递给身边的人。
七夕表白网页完整源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025七夕 · 程序员的浪漫 - 编程狮(w3cschool.cn)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色和字体 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#9333ea', // 浪漫紫色
secondary: '#22d3ee', // 科技蓝
accent: '#ec4899', // 粉色点缀
dark: '#1e293b',
},
fontFamily: {
code: ['Consolas', 'Monaco', 'monospace'],
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.text-shadow-glow {
text-shadow: 0 0 15px rgba(147, 51, 234, 0.8);
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle 2s infinite alternate;
}
.heart {
transform-origin: center;
animation: pulse 1.5s infinite;
}
.code-rain {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
}
@keyframes twinkle {
from { opacity: 0.3; }
to { opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 打字机效果 */
.typewriter-text {
overflow: hidden;
border-right: 0.15em solid #9333ea;
white-space: nowrap;
margin: 0 auto;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #9333ea }
}
</style>
</head>
<body class="bg-gradient-to-br from-dark to-slate-900 text-white min-h-screen overflow-x-hidden relative">
<!-- 星空背景 -->
<div id="stars" class="fixed inset-0 z-0"></div>
<!-- 代码雨效果 -->
<canvas id="codeRain" class="code-rain"></canvas>
<div class="container mx-auto px-4 py-16 relative z-10">
<!-- 页面标题 -->
<header class="text-center mb-16 mt-8">
<h1 class="text-[clamp(2rem,5vw,4rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary mb-4 text-shadow-glow">
七夕 · 2025
</h1>
<p class="text-gray-300 text-lg md:text-xl max-w-2xl mx-auto">
一个程序员的浪漫，用代码书写的爱意
</p>
</header>
<!-- 主要内容区 -->
<main class="max-w-4xl mx-auto">
<!-- 代码风格表白卡片 -->
<div class="bg-slate-800/70 backdrop-blur-md rounded-xl p-6 md:p-8 shadow-2xl shadow-primary/20 border border-primary/30 mb-12 transform transition-all duration-500 hover:shadow-primary/40 hover:-translate-y-1">
<div class="flex items-center mb-6">
<i class="fa fa-heart text-accent text-2xl mr-3 heart"></i>
<h2 class="text-2xl md:text-3xl font-bold text-white">爱的算法</h2>
</div>
<div class="font-code bg-slate-900/80 p-4 rounded-lg text-green-400 overflow-x-auto">
<pre>def love_algorithm(you, me):
while True:
happiness = you + me
memories.append(create_moment(you, me))
if challenges_occur():
solve_together(you, me)
else:
celebrate_life(you, me)
# 七夕特别指令
if today == "2025年七夕":
say("我爱你")
give(heart)
return forever</pre>
</div>
<p class="mt-6 text-gray-300">
这是我为我们编写的爱情算法，没有bug，只有无限循环的幸福。
</p>
</div>
<!-- 打字机效果表白 -->
<div class="bg-slate-800/70 backdrop-blur-md rounded-xl p-6 md:p-8 shadow-2xl shadow-secondary/20 border border-secondary/30 mb-12 transform transition-all duration-500 hover:shadow-secondary/40 hover:-translate-y-1">
<div class="flex items-center mb-6">
<i class="fa fa-keyboard-o text-secondary text-2xl mr-3"></i>
<h2 class="text-2xl md:text-3xl font-bold text-white">爱的输出</h2>
</div>
<div class="h-32 flex items-center justify-center">
<p id="typewriter" class="text-xl md:text-2xl text-center typewriter-text"></p>
</div>
</div>
<!-- 互动部分 -->
<div class="bg-slate-800/70 backdrop-blur-md rounded-xl p-6 md:p-8 shadow-2xl shadow-accent/20 border border-accent/30 mb-12 text-center">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">你愿意...</h2>
<div class="flex flex-col sm:flex-row justify-center gap-6 mb-8">
<button id="yesBtn" class="px-8 py-4 bg-gradient-to-r from-primary to-accent rounded-full text-white text-lg font-bold shadow-lg hover:shadow-primary/50 transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary">
<i class="fa fa-check mr-2"></i>接受我的爱意
</button>
<button id="noBtn" class="px-8 py-4 bg-gray-700 rounded-full text-white text-lg font-bold shadow-lg hover:bg-gray-600 transform transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
<i class="fa fa-times mr-2"></i>再考虑一下
</button>
</div>
<div id="response" class="hidden mt-8 p-6 rounded-lg bg-gradient-to-r from-primary/20 to-secondary/20 text-xl"></div>
</div>
<!-- 记忆碎片 -->
<div class="bg-slate-800/70 backdrop-blur-md rounded-xl p-6 md:p-8 shadow-2xl shadow-primary/20 border border-primary/30">
<div class="flex items-center mb-6">
<i class="fa fa-database text-primary text-2xl mr-3"></i>
<h2 class="text-2xl md:text-3xl font-bold text-white">我们的变量</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-900/50 p-4 rounded-lg border border-primary/20 hover:border-primary/50 transition-all">
<h3 class="font-bold text-secondary mb-2">初遇</h3>
<p class="text-gray-300 text-sm">第一次见到你时，我的心跳复杂度从O(1)变成了O(n²)</p>
</div>
<div class="bg-slate-900/50 p-4 rounded-lg border border-primary/20 hover:border-primary/50 transition-all">
<h3 class="font-bold text-secondary mb-2">陪伴</h3>
<p class="text-gray-300 text-sm">和你在一起的时光，是我人生中最优雅的代码</p>
</div>
<div class="bg-slate-900/50 p-4 rounded-lg border border-primary/20 hover:border-primary/50 transition-all">
<h3 class="font-bold text-secondary mb-2">未来</h3>
<p class="text-gray-300 text-sm">希望我们的故事，能像一个没有终止条件的循环</p>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="text-center mt-20 mb-8 text-gray-400 text-sm">
<p>用 <i class="fa fa-heart text-accent"></i> 和 <i class="fa fa-code text-secondary"></i> 编写于 2025 七夕</p>
<p class="mt-3">
<a href="https://www.w3cschool.cn/" target="_blank" rel="noopener noreferrer"
class="text-secondary hover:text-primary transition-colors duration-300 flex items-center justify-center">
<i class="fa fa-graduation-cap mr-1"></i>
编程狮(w3cschool.cn) - 程序员的学习乐园
</a>
</p>
</footer>
</div>
<script>
// 创建星空背景
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
// 随机大小
const size = Math.random() * 3 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
// 随机位置
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
// 随机动画延迟
star.style.animationDelay = `${Math.random() * 2}s`;
starsContainer.appendChild(star);
}
}
// 代码雨效果
function createCodeRain() {
const canvas = document.getElementById('codeRain');
const ctx = canvas.getContext('2d');
// 设置canvas尺寸
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 字符集 - 一些有意义的编程字符和汉字
const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ我爱你七夕';
// 列宽
const columnWidth = 15;
// 列数
const columns = Math.floor(canvas.width / columnWidth);
// 每列的y坐标
const drops = [];
// 初始化每列的起始位置
for (let i = 0; i < columns; i++) {
drops[i] = Math.random() * -100;
}
function draw() {
// 半透明背景，创建轨迹效果
ctx.fillStyle = 'rgba(15, 23, 42, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 文字颜色
ctx.fillStyle = '#22d3ee';
ctx.font = '15px Consolas';
// 绘制字符
for (let i = 0; i < drops.length; i++) {
// 随机字符
const text = chars[Math.floor(Math.random() * chars.length)];
// 绘制字符
ctx.fillText(text, i * columnWidth, drops[i] * 15);
// 如果字符超出屏幕或随机重置
if (drops[i] * 15 > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
// 每列下落速度略有不同
drops[i]++;
}
}
// 动画循环
setInterval(draw, 35);
}
// 打字机效果
function typeWriterEffect() {
const text = "从遇见你的那一刻起，我的心就只为你编译。这个七夕，我想对你说：我爱你，不止今天，而是永远的循环。";
const element = document.getElementById('typewriter');
let i = 0;
function type() {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
setTimeout(type, 50);
}
}
type();
}
// 按钮交互
function setupButtonInteraction() {
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');
const responseDiv = document.getElementById('response');
// "接受"按钮
yesBtn.addEventListener('click', () => {
responseDiv.innerHTML = `
<div class="flex flex-col items-center">
<div class="text-accent text-5xl mb-4">
<i class="fa fa-heart heart"></i>
</div>
<p>我就知道！余生请多指教，我的爱️</p>
<div class="mt-4 text-green-400 font-code">
console.log("我们的故事，从此开始执行...")
</div>
</div>
`;
responseDiv.classList.remove('hidden');
// 撒爱心效果
createHearts();
});
// "再考虑一下"按钮 - 调皮的效果
noBtn.addEventListener('mouseover', () => {
const x = Math.random() * (window.innerWidth - 200);
const y = Math.random() * (window.innerHeight - 100);
noBtn.style.position = 'absolute';
noBtn.style.left = `${x}px`;
noBtn.style.top = `${y}px`;
});
}
// 撒爱心效果
function createHearts() {
for (let i = 0; i < 50; i++) {
const heart = document.createElement('div');
heart.innerHTML = '<i class="fa fa-heart"></i>';
heart.classList.add('text-accent', 'absolute');
heart.style.left = `${Math.random() * 100}%`;
heart.style.top = `${Math.random() * 100}%`;
heart.style.fontSize = `${Math.random() * 20 + 10}px`;
heart.style.opacity = Math.random() + 0.3;
heart.style.animation = `fall ${Math.random() * 3 + 2}s linear forwards`;
heart.style.zIndex = '100';
document.body.appendChild(heart);
// 移除元素
setTimeout(() => {
heart.remove();
}, 5000);
}
// 添加下落动画
const style = document.createElement('style');
style.textContent = `
@keyframes fall {
0% {
transform: translateY(-10px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
`;
document.head.appendChild(style);
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
createStars();
createCodeRain();
typeWriterEffect();
setupButtonInteraction();
});
</script>
</body>
</html>
创建一个valentines-day.html文件并使用编辑器打开，将以上代码粘贴后保存，使用浏览器即可查看效果。
或者直接复制以上代码粘贴至 W3Cschool 的HTML在线编译器中点击运行，就可以在线运行并展示这个网页了
六、结语
今天，我们一同剖析了一个程序员的七夕表白网页，从 HTML 的搭建到 CSS 的美化，再到 JavaScript 的动态交互，每一个环节都蕴含着编程的魅力和浪漫的情感。希望这篇文章能激发你对编程的兴趣，让你在编程狮（w3cschool.cn）这个学习乐园中，开启一段充满创意和爱的编程之旅。无论是为了表达爱意，还是为了实现自己的创意项目，编程都是一种强大的工具，等待着你去探索和运用。
小狮博客
