各位正在學(xué)習(xí)網(wǎng)頁編程的同學(xué)們，今天編程獅（W3Cschool.cn）的前端團(tuán)隊(duì)將帶大家打造一個浪漫的520愛心告白頁面。這個項(xiàng)目綜合運(yùn)用了HTML、CSS和JavaScript知識，非常適合零基礎(chǔ)的小伙伴練習(xí)。完成后，你可以將這個頁面作為520禮物送給心愛的人，也可以作為編程作品展示你的學(xué)習(xí)成果。
項(xiàng)目效果預(yù)覽
我們的目標(biāo)頁面包含：
- 中間的動態(tài)跳動愛心（帶有心跳動畫效果）
- 浪漫的詩意告白文字
- 點(diǎn)擊頁面任意位置生成愛心效果
- 自動下落的愛心雨（每300毫秒生成一個）
整個頁面采用了粉色系主題，充滿浪漫氛圍，非常契合520這個特殊的日子。
HTML結(jié)構(gòu)解析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet">
<title>W3Cschool編程獅 ? 520愛心告白</title>
<meta name="description" content="編程獅(W3Cschool.cn)提供的浪漫520頁面，包含動態(tài)愛心雨效果和詩意告白">
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">??</div>
<div class="message">
<p>在數(shù)不盡的星辰中</p>
<p>你是我唯一追尋的光</p>
<p>520 ? 愛你每一天</p>
</div>
</div>
<footer>
Powered by 編程獅 ? W3Cschool學(xué)習(xí)平臺
<div>w3cschool.cn</div>
</footer>
</body>
</html>代碼解析：
- 我們使用了語義化HTML標(biāo)簽，使頁面結(jié)構(gòu)清晰- 引入了谷歌字體庫，提升文字顯示效果
- 使用
viewport元標(biāo)簽確保頁面在移動設(shè)備上良好顯示 - 整體采用居中布局，主內(nèi)容通過
position:absolute實(shí)現(xiàn)精準(zhǔn)定位
CSS樣式詳解
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}重點(diǎn)知識點(diǎn)：
- 響應(yīng)式布局：使用
vh單位使頁面高度適應(yīng)不同屏幕尺寸 - 動畫效果：通過
@keyframes定義心跳動畫，實(shí)現(xiàn)愛心跳動效果 - 文字陰影：使用
text-shadow增加文字立體感 - 居中定位：
absolute+transform實(shí)現(xiàn)頁面元素精確定位
JavaScript交互功能
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '??';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);代碼解析：
- 動態(tài)元素創(chuàng)建：使用
document.createElement生成愛心元素 - 隨機(jī)效果：通過
Math.random()實(shí)現(xiàn)愛心大小和下落速度的隨機(jī)變化 - 事件監(jiān)聽：添加點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊位置生成愛心
- 定時器：使用
setInterval實(shí)現(xiàn)自動愛心雨效果
如何運(yùn)行你的520愛心頁面
520.html 完整源代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet">
<title>W3Cschool編程獅 ? 520愛心告白</title>
<meta name="description" content="編程獅(W3Cschool.cn)提供的浪漫520頁面，包含動態(tài)愛心雨效果和詩意告白">
<style>
body {
margin: 0;
height: 100vh;
background: #ffe6f2;
overflow: hidden;
position: relative;
font-family: 'Noto Sans SC', 'Source Han Sans', sans-serif;
}
/* 主內(nèi)容容器樣式
居中定位 + 文字居中 */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff3366;
}
.heart {
font-size: 100px;
animation: pulse 1.2s infinite;
text-shadow: 0 0 20px rgba(255,51,102,0.5);
}
.message {
font-size: 2em;
margin: 20px 0;
line-height: 1.6;
}
.hearts {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
}
/* 心跳動畫
縮放比例 1 -> 1.1 -> 1 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart-fall {
position: absolute;
animation: fall linear forwards;
opacity: 0.7;
}
/* 愛心下落動畫
帶360度旋轉(zhuǎn)效果 */
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="hearts"></div>
<div class="container">
<div class="heart">??</div>
<div class="message">
<p>在數(shù)不盡的星辰中</p>
<p>你是我唯一追尋的光</p>
<p>520 ? 愛你每一天</p>
</div>
</div>
<footer style="
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ff6680;
font-size: 14px;
">
Powered by 編程獅 ? W3Cschool學(xué)習(xí)平臺
<div>w3cschool.cn</div>
</footer>
<script>
// 創(chuàng)建單個愛心元素
// 參數(shù)說明：
// x - 愛心初始橫坐標(biāo)
// y - 愛心初始縱坐標(biāo)
function createHeart(x, y) {
const heart = document.createElement('div');
heart.innerHTML = '??';
heart.className = 'heart-fall';
heart.style.left = x + 'px';
heart.style.top = y + 'px';
heart.style.fontSize = Math.random() * 30 + 20 + 'px';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
document.querySelector('.hearts').appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
// 點(diǎn)擊事件監(jiān)聽：在點(diǎn)擊位置生成愛心
document.addEventListener('click', (e) => {
createHeart(e.clientX, e.clientY);
});
// 自動生成愛心雨
// 自動愛心雨定時器（每300ms生成一個）
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = -50;
createHeart(x, y);
}, 300);
</script>
</body>
<!-- 技術(shù)支持：W3Cschool前端團(tuán)隊(duì) -->
</html>- 將上述完整代碼復(fù)制到文本編輯器（如記事本、HTML 在線編譯器、Trae、VS Code等）
- 保存為
.html文件（例如：520.html） - 用瀏覽器打開該文件即可查看效果
拓展學(xué)習(xí)建議
- 嘗試修改背景顏色和文字內(nèi)容，創(chuàng)建屬于你自己的個性化頁面
- 學(xué)習(xí)更多CSS效果動畫，為頁面添加更多交互元素
- 探索JavaScript高級功能，實(shí)現(xiàn)更復(fù)雜的交互效果
-
推薦課程：
感謝各位同學(xué)跟著編程獅（W3Cschool.cn）一起學(xué)習(xí)前端開發(fā)知識。希望這個520愛心頁面不僅能夠幫助你表達(dá)愛意，也能成為你編程學(xué)習(xí)道路上的一個美好回憶！
