免費 AI IDE
七夕佳節(jié)，當傳統(tǒng)浪漫邂逅現(xiàn)代科技，會碰撞出怎樣的火花？今天，就隨編程獅一同走進一個程序員精心打造的七夕表白網(wǎng)頁，探索代碼背后的深情，同時學習如何運用 HTML、CSS 和 JavaScript 打造出令人眼前一亮的互動效果。無論你是編程初學者，還是對浪漫編程充滿好奇的愛好者，本文都將為你詳細解析，開啟一段編程與浪漫交織的學習之旅。（完整源碼在文末）
一、初窺浪漫網(wǎng)頁的神秘面紗
打開這個七夕表白網(wǎng)頁，首先映入眼簾的是深邃的夜空背景，繁星點點，仿佛將人帶入一個夢幻的宇宙空間。而飄落的代碼雨，如同一場科技感十足的視覺盛宴，為這個浪漫的節(jié)日增添了一份獨特的神秘氛圍。中央的表白文字，以打字機般的節(jié)奏緩緩出現(xiàn)，將程序員的心聲一字一句地呈現(xiàn)在愛人面前。頁面下方的互動按鈕，等待著愛人回應這跨越代碼的愛意。這一切背后，都離不開 HTML、CSS 和 JavaScript 的精妙配合。
二、搭建浪漫的基石：HTML 結構
HTML 是構建網(wǎng)頁的基礎，如同搭建一座浪漫城堡的磚石。在這個表白網(wǎng)頁中，HTML 負責規(guī)劃頁面的布局和內容框架。它定義了頁面的頭部、主要展示區(qū)域、互動部分以及頁腳等各個板塊。以表白卡片為例，HTML 通過 <div> 標簽創(chuàng)建了一個獨立的區(qū)域，為后續(xù)的樣式和交互做好了準備。
<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 基礎實戰(zhàn)“div 元素嵌套”章節(jié)中，初學者可以輕松理解 <div> 是如何作為容器，承載后續(xù)的文本、圖片等元素。通過設置不同的類名，如 bg-slate-800/70 等，為這個表白卡片賦予了初始的外觀特性，等待 CSS 的進一步美化。
三、渲染浪漫色彩：CSS 樣式設計
CSS 是網(wǎng)頁的化妝師，它為 HTML 構建的結構涂上浪漫的色彩。在這個表白網(wǎng)頁中，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 屬性又是怎樣驅動星星的閃爍和愛心的跳動，賦予頁面靈動的生命力。這些樣式代碼如同畫家的筆觸，將一個靜態(tài)的網(wǎng)頁變成了一幅充滿動感的浪漫畫卷。
四、注入浪漫靈魂：JavaScript 動態(tài)交互
JavaScript 是這個表白網(wǎng)頁的靈魂工程師，它讓頁面從靜態(tài)展示躍升為動態(tài)互動。通過 JavaScript，程序員實現(xiàn)了星空背景的隨機生成、代碼雨的流動效果、打字機文字的逐步輸出，以及互動按鈕的趣味反饋。
// 創(chuàng)建星空背景
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 基礎實戰(zhàn)，就可以理解并掌握這段代碼是如何利用循環(huán)和隨機函數(shù)，創(chuàng)造出獨一無二的星空背景。每一次頁面的加載，都是一個新的浪漫星空的誕生。而類似的邏輯也被應用在代碼雨和打字機效果中，讓頁面充滿了不可預測的驚喜和活力。
五、動手實踐：打造你的專屬浪漫網(wǎng)頁
了解了這個七夕表白網(wǎng)頁的構建原理后，是不是也想親手打造一個屬于自己的浪漫作品呢？編程獅平臺提供了豐富的學習資源和在線編輯器，你可以從簡單的 HTML 結構開始，逐步添加 CSS 樣式和 JavaScript 功能。比如，你可以嘗試修改代碼雨中的字符集，加入更多你和愛人之間的專屬符號；或者調整動畫的速度和效果，讓表白更加符合你的心意。
在學習過程中，遇到任何問題，都可以在編程獅的社區(qū)中尋求幫助，與其他編程愛好者交流心得。通過實踐，你不僅能提升自己的編程技能，還能將這份浪漫的創(chuàng)造力傳遞給身邊的人。
七夕表白網(wǎng)頁完整源碼
<!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 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>
<!-- 主要內容區(qū) -->
<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，只有無限循環(huán)的幸福。
</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(n2)</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">和你在一起的時光，是我人生中最優(yōu)雅的代碼</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">希望我們的故事，能像一個沒有終止條件的循環(huán)</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="http://xlrtb.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>
// 創(chuàng)建星空背景
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;
// 列數(shù)
const columns = Math.floor(canvas.width / columnWidth);
// 每列的y坐標
const drops = [];
// 初始化每列的起始位置
for (let i = 0; i < columns; i++) {
drops[i] = Math.random() * -100;
}
function draw() {
// 半透明背景，創(chuàng)建軌跡效果
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]++;
}
}
// 動畫循環(huán)
setInterval(draw, 35);
}
// 打字機效果
function typeWriterEffect() {
const text = "從遇見你的那一刻起，我的心就只為你編譯。這個七夕，我想對你說：我愛你，不止今天，而是永遠的循環(huán)。";
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("我們的故事，從此開始執(zhí)行...")
</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>
創(chuàng)建一個valentines-day.html文件并使用編輯器打開，將以上代碼粘貼后保存，使用瀏覽器即可查看效果。
或者直接復制以上代碼粘貼至 W3Cschool 的HTML在線編譯器中點擊運行，就可以在線運行并展示這個網(wǎng)頁了
六、結語
今天，我們一同剖析了一個程序員的七夕表白網(wǎng)頁，從 HTML 的搭建到 CSS 的美化，再到 JavaScript 的動態(tài)交互，每一個環(huán)節(jié)都蘊含著編程的魅力和浪漫的情感。希望這篇文章能激發(fā)你對編程的興趣，讓你在編程獅（w3cschool.cn）這個學習樂園中，開啟一段充滿創(chuàng)意和愛的編程之旅。無論是為了表達愛意，還是為了實現(xiàn)自己的創(chuàng)意項目，編程都是一種強大的工具，等待著你去探索和運用。
